Блог

Главная - Вопросы по программированию - Заполнить один выпадающий список на основе выбора в другом

Заполнить один выпадающий список на основе выбора в другом

#javascript #html

#javascript #HTML

Вопрос:

Мне нужно изменить содержимое выпадающего списка B на основе выбора в выпадающем списке A, используя javascript. Здесь не задействованы запросы к БД — я заранее знаю, какое содержимое B должно быть выбрано в A. Я нашел несколько примеров с использованием AJAX, но поскольку в этом нет запроса к БД, в этом нет необходимости. Кто-нибудь может указать мне на какой-нибудь пример кода, как это сделать?

Ответ №1:

 function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i  ) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i  ) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i  ) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }

}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}  
 <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select>

Комментарии:

1. Это может быть поздно, но я искал фрагмент кода для своих выпадающих списков, и вы предоставили отличный рабочий пример. Спасибо! 1

2. @bot — Была onLoad выбрана проблема, когда функция должна быть привязана в другом месте, например no wrap - in <head> . Также по какой-то причине я изначально написал его для обхода дерева DOM каждый раз, когда ему требуется доступ к ddl, что кажется расточительным. Итак, я обновил его, чтобы передавать ссылку на элемент, а не идентификатор. Пожалуйста, смотрите: jsfiddle.net/e6hzj8gx/4

3. Я всегда содрогаюсь, когда вижу, что var colours = new Array('Black', 'White', 'Blue'); Simply var colours = ['Black', 'White', 'Blue']; — это все, что вам нужно.

4. Мне нужно сделать то же самое, но значения параметра должны быть извлечены из базы данных, как я могу это сделать?

5. Самый эффективный способ из когда-либо существовавших. Также возможно использовать двумерные массивы для описания <значение параметра=’value’></option> .

Ответ №2:

Настройте мой в закрытии и с помощью прямого JavaScript, объяснение предоставлено в комментариях

 (function() {

  //setup an object fully of arrays
  //alternativly it could be something like
  //{"yes":[{value:sweet, text:Sweet}.....]}
  //so you could set the label of the option tag something different than the name
  var bOptions = {
    "yes": ["sweet", "wohoo", "yay"],
    "no": ["you suck!", "common son"]
  };

  var A = document.getElementById('A');
  var B = document.getElementById('B');

  //on change is a good event for this because you are guarenteed the value is different
  A.onchange = function() {
    //clear out B
    B.length = 0;
    //get the selected value from A
    var _val = this.options[this.selectedIndex].value;
    //loop through bOption at the selected value
    for (var i in bOptions[_val]) {
      //create option tag
      var op = document.createElement('option');
      //set its value
      op.value = bOptions[_val][i];
      //set the display label
      op.text = bOptions[_val][i];
      //append it to B
      B.appendChild(op);
    }
  };
  //fire this to update B on load
  A.onchange();

})();  
 <select id='A' name='A'>
  <option value='yes' selected='selected'>yes
  <option value='no'> no
</select>
<select id='B' name='B'>
</select>

Ответ №3:

Не могли бы вы, пожалуйста, взглянуть на: http://jsfiddle.net/4Zw3M/1 /.

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

 var data = [ // The data
    ['ten', [
        'eleven','twelve'
    ]],
    ['twenty', [
        'twentyone', 'twentytwo'
    ]]
];

$a = $('#a'); // The dropdowns
$b = $('#b');

for(var i = 0; i < data.length; i  ) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j  ) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice