Как изменить параметры с помощью jQuery?
предположим, что список опций доступен, как вы обновите <select>
новые <option>
s?
9 ответов
вы можете удалить существующие параметры с помощью empty
метод, а затем добавьте новые параметры:
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);
если у вас есть новые опции в объекте можно:
var newOptions = {"Option 1": "value1",
"Option 2": "value2",
"Option 3": "value3"
};
var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
Edit: для удаления всех параметров, кроме первого, вы можете использовать :gt
селектор, чтобы получить все option
элементы с индексом больше нуля и remove
них:
$('#selectId option:gt(0)').remove(); // remove all options, but not the first
Я бросил отличный ответ CMS в быстрое расширение jQuery:
(function($, window) {
$.fn.replaceOptions = function(options) {
var self, $option;
this.empty();
self = this;
$.each(options, function(index, option) {
$option = $("<option></option>")
.attr("value", option.value)
.text(option.text);
self.append($option);
});
};
})(jQuery, window);
Он ожидает массив объектов, содержащих ключи" текст "и" значение". Таким образом, использование выглядит следующим образом:
var options = [
{text: "one", value: 1},
{text: "two", value: 2}
];
$("#foo").replaceOptions(options);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
где comboBx-Ваш идентификатор поля со списком.
или вы можете добавить параметры в виде строки к уже существующему innerHTML, а затем назначить select innerHTML.
редактировать
Если вам нужно сохранить первый вариант и удалить все остальные, то вы можете использовать
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
по какой-то странной причине эта часть
$el.empty(); // remove old options
из решения CMS не работал для меня, поэтому вместо этого я просто использовал это
el.html(' ');
и это работает. Так что мой код теперь выглядит так:
var newOptions = {
"Option 1":"option-1",
"Option 2":"option-2"
};
var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
$el.append($("<option></option>")
.attr("value", value).text(key));
});
удаление и добавление элемента DOM медленнее, чем изменение существующего.
Если ваш вариант наборы имеют одинаковую длину, вы можете сделать что-то вроде этого:
$('#my-select option')
.each(function(index) {
$(this).text('someNewText').val('someNewValue');
});
если ваш новый набор опций имеет другую длину, вы можете удалить/добавить пустые опции, которые вам действительно нужны, используя некоторую технику, описанную выше.
Если, например, ваш html-код содержит этот код:
<select id="selectId"><option>Test1</option><option>Test2</option></select>
для того чтобы изменить список внутри вашего выбора, вы можете использовать этот код ниже. когда ваше имя выберите имя selectId.
var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);
в этом примере я меняю старый список опции только одним новым вариантом.
если мы обновим <select>
постоянно и нам нужно сохранить Предыдущее значение :
var newOptions = {
'Option 1':'value-1',
'Option 2':'value-2'
};
var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
$el.append($('<option></option>').attr('value', value).text(key));
if (value === prevValue){
$el.val(value);
}
});
$el.trigger('change');
старая школа делать вещи вручную всегда была хороша для меня.
-
очистите select и оставьте первый вариант:
$('#your_select_id').find('option').remove() .end().append('<option value="0">Selec...</option>') .val('whatever');
-
Если ваши данные поступают из Json или что-то еще (просто объедините данные):
var JSONObject = JSON.parse(data); newOptionsSelect = ''; for (var key in JSONObject) { if (JSONObject.hasOwnProperty(key)) { var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>'; } } $('#your_select_id').append( newOptionsSelect );
-
Мой JSON Objetc:
[{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
Это решение идеально подходит для работы с Ajax и отвечает в Json из базы данных.