Используя ядро jQuery, как удалить все опции поля выбора, затем добавить одну опцию и выбрать ее?
Мое поле выбора имеет следующий вид.
<Select id="mySelect" size="9"> </Select>
EDIT: Следующий код был полезен при создании цепочки. Однако (в Internet Explorer) .val('whatever')
не выбирал опцию, которая была добавлена. (Я использовал одно и то же 'значение' в .append
и .val
).
$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');
EDIT: Пытаясь заставить его имитировать этот код, я использую следующий код каждый раз, когда страница/форма сбрасывается. Это поле выбора заполнено набором радиокнопок. .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>') ;
Но оба ответа привели меня к окончательному решению...
У меня была ошибка в IE7 (отлично работает в IE6), где с помощью вышеуказанных методов в jQuery будет ясен выберите в дом, но не на экране. Используя панель инструментов разработчика, т. е. я могу подтвердить, что выбрать были очищены и были новые предметы, но визуально выберите еще показывали старые предметы - даже если вы не смогли выбрать их.
Исправление было использовать стандартные методы DOM и свойства (как плакат оригинал), чтобы очистить, а не на jQuery - все-таки с помощью jQuery, чтобы добавить варианты.
$('#mySelect')[0].options.length = 0;
Не совсем понятно, что вы имеете в виду под "добавить один и выбрать его", поскольку он будет выбран по умолчанию в любом случае. Но если бы вы добавили более одного, это имело бы больше смысла. Как насчет чего-то вроде:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Ответ на "EDIT": Вы можете уточнить, что вы имеете в виду под "Это поле выбора заполнено набором радиокнопок"? Элемент <select>
не может (по закону) содержать элементы <input type="radio">
.
$('#mySelect')
.empty()
.append('<option value="whatever">text</option>')
.find('option:first')
.attr("selected","selected")
;
Благодаря полученным ответам я смог создать что-то вроде следующего, что соответствует моим потребностям. Мой вопрос был несколько двусмысленным. Спасибо за ответ. Моя последняя проблема была решена путем включения "selected" в опцию, которую я хотел выбрать.
$(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>
Сначала очистите все существующие опции, кроме первого(--выбрать--)
Добавить новые значения параметров, используя петли по одному
$('#ddlCustomer').найти('опции:нет(:во-первых)').удалить(); для (ВАР я = 0; Я &л; oResult.длина; я++) { $(" и#ddlCustomer и quot;).добавить(новый вариант(oResult[я].CustomerName, oResult[я].Кодклиента + '/' + oResult[я].Идентификатор)); }
Как насчет просто изменить HTML для новых данных.
$('#mySelect').html('<option value="whatever">text</option>');
Другой пример:
$('#mySelect').html('
<option value="1" selected>text1</option>
<option value="2">text2</option>
<option value="3" disabled>text3</option>
');
Другой способ:
$('#select').empty().append($('<option>').text('---------').attr('value',''));
По этой ссылке, есть хорошие практики https://api.jquery.com/select/
Опираясь на mauretto'ы ответьте, это немного легче для чтения и понимания:
$('#mySelect').find('option').not(':first').remove();
Чтобы удалить все параметры, кроме одного с определенного значения, вы можете использовать это:
$('#mySelect').find('option').not('[value=123]').remove();
Это было бы лучше, если возможность будет добавлена уже есть.
Я'вэ нашел в сети что-то вроде ниже. С тысячи вариантов как в моей ситуации это намного быстрее, чем.пустой()или
.найти().удалить()` с помощью 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;
}
Подробнее здесь.
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
Первая строка кода будет удалить все варианты для выбора, а не вариант найти критерии уже упоминалось.
Вторая строка кода будет добавить параметр с указанным значением (на"testValue-то") и текст (на"TestText-то").
Вы можете сделать просто путем замены HTML
$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
&ГТ; только одну строку, чтобы удалить все параметры в теге Select и после можно добавить любые варианты, а затем сделать вторую строку, чтобы добавить варианты.
$('.ddlsl').empty();
$('.ddlsl').append(new Option('Select all', 'all'));
в <!-- начинается фрагмент с JS скрывать: ложные консоли: правда Бабеля: ложь --&ГТ;
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>
в <!-- конец фрагмента --&ГТ;