Utilizarea de bază jQuery, cum a face tu a elimina toate opțiunile de o casetă de selectare, apoi se adaugă o opțiune și selectați-l?
Mi selectați caseta este următoarea.
<Select id="mySelect" size="9"> </Select>
EDIT: codul De mai jos a fost de ajutor cu înlănțuirea. Cu toate acestea, (în Internet Explorer) .val('ce')
nu selectați opțiunea care a fost adăugat. (Am folosit același 'valoare' în ambele .adăugați "și".val
.)
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Încercarea de a obține pentru a imita acest cod, am folosi următorul cod ori de câte ori pagina/forma este resetat. Această casetă de selectare este populat de un set de butoane radio. .focus()
a fost mai aproape, dar opțiunea nu apare selectat ca o face cu .selectate= "adevărat"
. Nu este nimic în neregulă cu cod existent - eu sunt doar încercarea de a afla jQuery.
var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";
EDIT: răspunsul selectat a fost aproape de ceea ce am nevoie. Aceasta a lucrat pentru mine:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Dar ambele răspunsuri m-a condus la ultima mea soluție..
Am avut un bug în IE7 (funcționează bine în IE6) în cazul în care utilizarea de mai sus jQuery metode ar goli selectați în DOM, dar nu pe ecran. Folosind IE Developer Toolbar am putut confirma că selectați au fost eliminate și au avut elemente noi, dar vizual selectați a arătat încă obiecte vechi - chiar dacă nu a putut să le selectați.
Fix a fost de a utiliza standard DOM metode/properites (ca posterul original a) pentru a șterge mai degrabă decât jQuery - încă folosind jQuery pentru a adăuga opțiuni.
$('#mySelect')[0].options.length = 0;
Nu stiu exact la ce te referi prin "adăugați unul și selectați", deoarece acesta va fi selectat implicit oricum. Dar, dacă ai fost pentru a adăuga mai mult de unul, s-ar face mai mult sens. Ce zici de ceva de genul:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Răspuns la "EDIT": Poate clarifica ceea ce înseamnă "Această casetă de selectare este populat de un set de butoane radio"? O <selectați> element nu poate (legal) conțin
<input type="radio">` elemente.
Multumesc pentru raspunsuri am primit, am fost capabil de a crea ceva de genul următor, care se potriveste nevoilor mele. Întrebarea mea a fost oarecum ambiguu. Multumesc pentru urmărirea. Ultima mea problema a fost rezolvată prin includerea "selectat" în opțiunea pe care am vrut selectate.
$(function() {
$('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
$("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
// Bind click event to each radio button.
$("input[name='myRadio']").bind("click",
function() {
switch(this.value) {
case "1":
$('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
break ;
case "2":
$('#mySelect').find('option').remove() ;
var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
var options = '' ;
for (var i = 0; i < items.length; i++) {
if (i==0) {
options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
}
else {
options += '<option value="' + items[i] + '">' + items[i] + '</option>';
}
}
$('#mySelect').html(options); // Populate select box with array
break ;
} // Switch end
} // Bind function end
); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input name="myRadio" type="radio" value="1" /></label>
<label>Two<input name="myRadio" type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>
În primul rând clar toate exisiting opțiune execpt primul(--Selectați--)
Adăugați o nouă opțiune valori folosind bucla unul câte unul
$('#ddlCustomer').găsi('opțiune:nu(:în primul rând)').remove(); pentru (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(nouă Opțiune(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); }
Cât despre schimbarea html pentru noi date.
$('#mySelect').html('<option value="whatever">text</option>');
Un alt exemplu:
$('#mySelect').html('
<option value="1" selected>text1</option>
<option value="2">text2</option>
<option value="3" disabled>text3</option>
');
Un alt mod:
$('#select').empty().append($('<option>').text('---------').attr('value',''));
Sub acest link, acolo sunt de bune practici https://api.jquery.com/select/
Clădirea de pe mauretto's a răspunde, acesta este un pic mai ușor de citit și de înțeles:
$('#mySelect').find('option').not(':first').remove();
Pentru a elimina toate opțiunile cu excepția unuia cu o anumită valoare, puteți folosi acest lucru:
$('#mySelect').find('option').not('[value=123]').remove();
Acest lucru ar fi mai bine dacă opțiunea de a fi adăugate era deja acolo.
Am'am gasit pe net ceva de genul de mai jos. Cu mii de opțiuni, cum ar fi în situația mea, acest lucru este mult mai rapid decât .gol () "sau".find().elimina()
din jQuery.
var ClearOptionsFast = function(id) {
var selectObj = document.getElementById(id);
var selectParentNode = selectObj.parentNode;
var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
selectParentNode.replaceChild(newSelectObj, selectObj);
return newSelectObj;
}
Mai multe informatii aici.
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
Prima linie de cod va elimina toate opțiunile de o selectați caseta ca nici o opțiune de a găsi criterii a fost menționat.
Cea de-a doua linie de cod se va adăuga Opțiunea cu valoarea specificată("testValue") și Text("TestText").
Doar o singură linie pentru a elimina toate opțiunile de tag-ul select și după puteți adăuga orice opțiuni, apoi face a doua linie pentru a adăuga opțiuni.
$('.ddlsl').empty();
$('.ddlsl').append(new Option('Select all', 'all'));
var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};
$('#selectID').empty();
$.each(listToAppend, function(val, text) {
$('#selectID').append( new Option(text,val) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>