оптовая замена вариантов строки html внутри select?

Question

Я бы хотел «переключить» список опций в окне выбора.

У меня есть два набора параметров в виде строк (американские штаты и канадские провинции).Однако я заметил, что в DOM объект select не имеет свойства innerhtml (по крайней мере, не в соответствии с w3schools).

Нужно ли идти, удалять и заменять опции по одному?Как мне это сделать?

Answer 1

Что бы я сделал, это создал бы оба, каждый в DIV;тогда просто прячься, что не нужно.Это устраняет необходимость в тяжелых манипуляциях с DOM (так как вы делаете это только один раз при загрузке страницы, в некоторых браузерах меньше возможностей для утечки памяти кашель ), и сложнее случайно испортитьсостояние приложения (что с Альбертой и Алабамой, совместно использующими один и тот же код и все такое).

Это будет начальная страница:

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>

и JavaScript для использования с ним (jQuery используется здесь длякраткость):

$(document).ready(function(){
  // hide both <div> containers on page load
  $('#canada_select').hide();
  $('#usa_select').hide();
  // create and populate both <select> boxes:
  $('#canada_select').append('<select name="province_canada">'
      + '<option value="AL">Alberta</option>'
      + '<option value="BC">British Columbia</option>...'
      + '</select>'
  );
  $('#usa_select').append('<select name="state_usa">'
      + '<option value="AL">Alabama</option>'
      + '<option value="AK">Alaska</option>...'
      + '</select>'
  );
};

// we'll also need handlers to show the correct list, 
//  depending on the selected country
$('#country_usa').click(function(){
  // we want US states
  $('#canada_select').hide();
  $('#usa_select').show();
});    
$('#country_canada').click(function(){
  // we want Canadian provinces
  $('#usa_select').hide();
  $('#canada_select').show();
});

Это должен быть результат:

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
  <select name="state_usa">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    ...
  </select>
</div>
<div id="canada_select">
  <select name="province_canada">
    <option value="AL">Alberta</option>
    <option value="BC">British Columbia</option>
    ...
  </select>
</div>

На бэкенде процесс state_usa iff country == 'США';процесс province_canada если country == 'Канада'.

Answer 2

Используя jQuery , я обычно делаю что-то вроде этого:

var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);

Что касается идеи «один за другим», убедитесь, что вы помните об общей медлительности взаимодействия DOM. Оптовая замена всей строки будет довольно быстрой, но если вы манипулируете DOM для каждого элемента в select, то ожидайте, что он будет медленным.

Answer 3

Почему бы не заменить весь <SELECT>? Есть несколько способов сделать это. Проще всего обернуть <SELECT> в SPAN / DIV и заменить его внутренним HTML.

Если вы извлекаете свои списки из массива, вы можете установить длину списка в ноль, а затем вставить новые элементы в цикл .

Answer 4

Просто добавьте атрибут multiple="multiple" к вашему тегу select, если вы хотите множественный выбор, или добавьте size="..", если вы хотите одиночный выбор

Answer 5

Когда вы говорите, что они хранятся как строки - вы имеете в виду, что каждый элемент является отдельной строкой или что элементы списка представляют собой одну строку (т.е. переменная var = "<li>item 1</li><li>item 2</li>";)

Если последнее, не могли бы вы включить тег <select> в строку и использовать функцию jQuery replaceWith?