Заполнение одного раскрывающегося списка на основе другого раскрывающегося списка

У меня есть два выпадающих меню:

<form id="dynamicForm">
  <select id="A">

  </select>
  <select id="B">

  </select>
</form>

И у меня есть объект словаря, где ключи - это параметры для A и значения, B - это массивы, соответствующие каждому элементу в A, как показано ниже:

var diction = {
    A1: ["B1", "B2", "B3"], 
    A2: ["B4", "B5", "B6"]
}

Как я могу динамически заполнять меню B на основе того, что пользователь выбирает в меню A?


javascript arrays html jquery jquery-events
person EliteKnight    schedule 28.01.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Свяжите обработчик события изменения и заполните второй тег выбора на основе выбранного значения.

var diction = {
  A1: ["B1", "B2", "B3"],
  A2: ["B4", "B5", "B6"]
}

// bind change event handler
$('#A').change(function() {
  // get the second dropdown
  $('#B').html(
      // get array by the selected value
      diction[this.value]
      // iterate  and generate options
      .map(function(v) {
        // generate options with the array element
        return $('<option/>', {
          value: v,
          text: v
        })
      })
    )
    // trigger change event to generate second select tag initially
}).change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="dynamicForm">
  <select id="A">
    <option value="A1">A1</option>
    <option value="A2">A2</option>
  </select>
  <select id="B">
  </select>
</form>

person Pranav C Balan    schedule 28.01.2017

arrow_upward
3
arrow_downward

Вы можете создать прослушиватель изменений для первого поля выбора и заполнить html второго поля выбора.

См. Демонстрацию ниже:

var diction = {
  A1: ["B1", "B2", "B3"],
  A2: ["B4", "B5", "B6"]
}
$('#A').on('change', function() {
  $('#B').html(
    diction[$(this).val()].reduce(function(p, c) {
      return p.concat('<option value="' + c + '">' + c + '</option>');
    }, '')
  );
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="dynamicForm">
  <select id="A">
    <option value="A1">A1</option>
    <option value="A2">A2</option>
  </select>
  <select id="B">

  </select>
</form>

person kukkuz    schedule 28.01.2017

arrow_upward
2
arrow_downward

Это будет динамически заполнять оба select:

var diction = {
  A1: ["B1", "B2", "B3"],
  A2: ["B4", "B5", "B6"]
};

// the function that will populate the select
function populateSelect(id, values) {
  // get the select element
  var $select = $(id);
  // empty it
  $select.empty();
  // for each value in values ...
  values.forEach(function(value) {
    // create an option element
    var $option = $("<option value='" + value + "'>" + value + "</option>");
    // and append it to the select
    $select.append($option);
  });
}

// when the #A select changes ...
$("#A").on("change", function() {
  // get the value of the selected element (the key)
  var key = $(this).val();
  // populate #B accordingly
  populateSelect("#B", diction[key]);
});

// Before anything, populate #A with the keys of diction and ...
populateSelect("#A", Object.keys(diction));
// ... #B with whatever #A hold its key 
populateSelect("#B", diction[$("#A").val()]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="dynamicForm">
  <select id="A">

  </select>
  <select id="B">

  </select>
</form>

person ibrahim mahrir    schedule 28.01.2017