Використовуючи ядро jQuery, як видалити всі варіанти поля вибору, а потім додати один варіант і вибрати його?
Моє поле вибору виглядає наступним чином.
<Select id="mySelect" size="9"> </Select>
ВИПРАВЛЕННЯ: Наступний код допоміг з ланцюжком. Однак (в Internet Explorer) .val('whatever')
не вибрав опцію, яка була додана. (Я використовував одне і те ж значення 'value' і в .append
, і в .val
).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
ВИПРАВЛЕННЯ: Намагаючись змусити його імітувати цей код, я використовую наступний код щоразу, коли сторінка/форма скидається. Це поле вибору заповнюється набором перемикачів. .focus()
був ближче, але опція не з'являлася вибраною, як це відбувається з .selected= "true"
. З моїм існуючим кодом все в порядку - я просто намагаюся вивчити 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: вибрана відповідь була близька до того, що мені потрібно. Це спрацювало для мене:
$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;
Але обидві відповіді привели мене до мого остаточного рішення...
$('#mySelect')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever')
;
Не зовсім розумію, що Ви маєте на увазі під &quo ;додати один і вибрати його&quo ;, оскільки він все одно буде обраний за замовчуванням. Але, якби Ви додали більше одного, це мало б більше сенсу. Як щодо чогось на кшталт:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Реакція на "РЕДАГУВАННЯ": Можна уточнити, що ви маєте на увазі під "Це поле вибору заповнене набором перемикачів"? Елемент <select>
не може (юридично) містити елементи <input type="radio">
.
Завдяки отриманим відповідям я зміг створити щось на кшталт наступного, що відповідає моїм потребам. Моє питання було дещо неоднозначним. Дякую за подальші дії. Моя остання проблема була вирішена шляхом включення &quo ;вибраного&quo ; в той варіант, який я хотів вибрати.
$(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>