Как удалить все параметры поля выбора, а затем добавить один параметр и выбрать его с помощью jQuery?
-
09-06-2019 - |
Вопрос
Как с помощью ядра jQuery удалить все параметры поля выбора, затем добавить один параметр и выбрать его?
Мое поле выбора следующее.
<Select id="mySelect" size="9" </Select>
РЕДАКТИРОВАТЬ:Следующий код помог при создании цепочки.Однако (в Internet Explorer) .val('whatever')
не выбрал добавленную опцию.(Я использовал одно и то же «значение» в обоих .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";
РЕДАКТИРОВАТЬ:выбранный ответ был близок к тому, что мне нужно.Это сработало для меня:
$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;
Но оба ответа привели меня к окончательному решению.
Решение
$('#mySelect')
.find('option')
.remove()
.end()
.append('<option value="whatever">text</option>')
.val('whatever')
;
Другие советы
$('#mySelect')
.empty()
.append('<option selected="selected" value="whatever">text</option>')
;
почему бы просто не использовать простой JavaScript?
document.getElementById("selectID").options.length = 0;
У меня была ошибка в IE7 (отлично работает в IE6), когда использование вышеуказанных методов jQuery очищало выбирать в DOM, но не на экране.Используя панель инструментов разработчика IE, я мог подтвердить, что выбирать были очищены и имели новые предметы, но визуально выбирать по-прежнему показывал старые элементы, хотя их нельзя было выбрать.
Исправление заключалось в использовании стандартных методов/свойств DOM (как это было в оригинале плаката) для очистки, а не jQuery - по-прежнему используя jQuery для добавления параметров.
$('#mySelect')[0].options.length = 0;
Если ваша цель — удалить все параметры из списка, кроме первого (обычно это вариант «Пожалуйста, выберите элемент»), вы можете использовать:
$('#mySelect').find('option:not(:first)').remove();
Не уверен, что именно вы подразумеваете под «добавьте один и выберите его», поскольку он все равно будет выбран по умолчанию.Но если бы вы добавили более одного, это имело бы больше смысла.Как насчет чего-то вроде:
$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();
Ответ на «РЕДАКТИРОВАТЬ»:Можете ли вы уточнить, что вы подразумеваете под «Это поле выбора заполнено набором переключателей»?А <select>
элемент не может (юридически) содержать <input type="radio">
элементы.
$('#mySelect')
.empty()
.append('<option value="whatever">text</option>')
.find('option:first')
.attr("selected","selected")
;
$("#control").html("<option selected=\"selected\">The Option...</option>");
Благодаря полученным ответам я смог создать что-то вроде следующего, которое соответствует моим потребностям.Мой вопрос был несколько двусмысленным.Спасибо за внимание.Моя последняя проблема была решена путем включения «выбранного» в вариант, который я хотел выбрать.
$(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>
Сначала очистите все существующие параметры, кроме первого (--Select--)
Добавляйте новые значения параметров, используя цикл одно за другим.
$('#ddlCustomer').find('option:not(:first)').remove(); for (var i = 0; i < oResult.length; i++) { $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID)); }
Как насчет того, чтобы просто изменить 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/
Я нашел в сети что-то вроде ниже.С тысячами вариантов, как в моей ситуации, это намного быстрее, чем .empty()
или .find().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;
}
Больше информации здесь.
Основываясь на ответе Мауретто, это немного легче читать и понимать:
$('#mySelect').find('option').not(':first').remove();
Чтобы удалить все параметры, кроме одного с определенным значением, вы можете использовать это:
$('#mySelect').find('option').not('[value=123]').remove();
Было бы лучше, если бы опция, которую нужно добавить, уже была там.
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');
Первая строка кода удалит все параметры поля выбора, поскольку критерии поиска параметров не были упомянуты.
Вторая строка кода добавит параметр с указанным значением («testValue») и текстом («TestText»).
Использует jquery опора() чтобы очистить выбранную опцию
$('#mySelect option:selected').prop('selected', false);
Это заменит существующий mySelect новым mySelect.
$('#mySelect').replaceWith('<Select id="mySelect" size="9">
<option value="whatever" selected="selected" >text</option>
</Select>');
Вы можете сделать, просто заменив html
$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
Надеюсь, это сработает
$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
- сохраните значения параметров для добавления в объект
- очистить существующие параметры в теге выбора
- перебрать объект списка и добавить содержимое в предполагаемый тег выбора
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>
Я видел этот код в select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections
$('#mySelect).val(null).trigger('change');
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
var d = data[i];
var option = $('<option/>').val(d.id).text(d.title);
select.append(option);
}
select.val('');