Как вы обновляете все опции select с помощью jquery

У меня есть объект карты, который я размещаю в Spring ModelAndView в моем контроллере и пересылаю в мое представление jsp, чтобы заполнить выбор. После его заполнения в первый раз я хочу заменить объект карты, используемый для заполнения выбранного объекта json, который я извлекаю с помощью jquery AJAX и преобразования в объект с помощью jQuery.parseJSON. Могу ли я динамически заменить все содержимое элемента с содержимым объекта json?

Ответ 1

Для фактического изменения параметров вам не нужен jQuery. Вы можете очистить старые параметры, назначив свойству length свойства options в поле SELECT, а затем добавьте новые параметры через #add и new Option().

Вот несколько примеров использования jQuery для части XHR, а затем прямое выполнение опций:

Из массива:

Если вы рисуете данные из массива внутри объекта (в этом случае массив, идентифицированный свойством options для результирующего объекта):

JSON:

{
  "options": [
    {"value": "New1", "text": "New Option 1"},
    {"value": "New2", "text": "New Option 2"},
    {"value": "New3", "text": "New Option 3"}
  ]
}

JavaScript:

$.ajax({
  url: "http://jsbin.com/apici3",
  dataType: "json",
  success: function(data) {
    var options, index, select, option;

    // Get the raw DOM object for the select box
    select = document.getElementById('theSelect');

    // Clear the old options
    select.options.length = 0;

    // Load the new options
    options = data.options; // Or whatever source information you're working with
    for (index = 0; index < options.length; ++index) {
      option = options[index];
      select.options.add(new Option(option.text, option.value));
    }
  }
});

Живой пример

Непосредственно из объекта:

Если вы используете имена свойств объекта как значения option и значения свойств в качестве текста опции:

JSON:

{
  "new1": "New Option 1",
  "new2": "New Option 2",
  "new3": "New Option 3"
}

JavaScript:

$.ajax({
  url: "http://jsbin.com/apici3/2",
  dataType: "json",
  success: function(data) {
    var name, select, option;

    // Get the raw DOM object for the select box
    select = document.getElementById('theSelect');

    // Clear the old options
    select.options.length = 0;

    // Load the new options
    for (name in data) {
      if (data.hasOwnProperty(name)) {
        select.options.add(new Option(data[name], name));
      }
    }
  }
});

Живой пример

Обновить: вместо

select.options.add(new Option(...));

вы также можете сделать:

select.options[select.options.length] = new Option(...);

Живой пример

..., который, я думаю, на самом деле я бы использовал метод add для options массива-like-thing (я не называю его массивом, потому что он имеет метод add, что массивы не имеют, а потому, что если вы используете push, какие массивы имеют, то это не работает).

Я тестировал оба метода на

IE6,7,8 (Windows)
Chrome (Linux и Windows)
Firefox (Linux и Windows)
Опера (Linux и Windows)
Safari (Windows)

... и обе работают. Возможно, кто-то с Mac может попробовать Safari для OS X для меня.

Я бы сказал, что оба способа очень, очень хорошо поддерживаются.

Ответ 2

       $.ajax({
                type: 'POST',
                url: getpolicytypeUrl ,
                data: { sirket: companyname },
                success: function (data) {

                    $.each(data, function(index, element) {
                        $('#policyshortname').append($('<option>', {
                            text: element.policyShortname
                        }));
                        $('#policyshortname').show(300);
                    });

                }
            });


        $('#policyshortname').html('refresh',true);