Как обновить все параметры выбора с помощью jquery

Question

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

Answer 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 (я не называю его массивом, потому что у него есть метод add, которого нет у массивов;и потому что если вы используете push, который есть у массивов do , это не сработает).

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

• IE6, 7,8 (Windows)
• Chrome (Linux & Windows)
• Firefox (Linux & Windows)
• Opera (Linux & Windows)
• Safari(Windows)

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

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

Answer 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);