Добавить третий список в зависимый раскрывающийся список JS - PullRequest
Новая
       7

Добавить третий список в зависимый раскрывающийся список JS

0 голосов
/ 15 сентября 2018

Я пытаюсь создать динамически зависимые выпадающие списки. Этот код ниже работает нормально с 2 зависимостями, и я пытаюсь добавить третью зависимость. У тебя есть идеи? Для примера:

Статус 1 = предложение 1, предложение 2, предложение 3, предложение 4

Предложение 1 = Вариант 1

Спасибо за вашу помощь

ОБНОВЛЕНИЕ 11.15.09

Наконец-то найти решение 

$("#street").val([]);
$('#street option').hide();

$("#city").on("change", function() {
  $('#street option')
    .hide() // hide all
    .filter('[value^="' + $(this).val() + '"]') // filter options with required value
    .show(); // and show them

  $("#street").val([]);
})

$("#number").val([]);
$('#number option').hide();

$("#street").on("change", function() {
  $('#number option')
    .hide() // hide all
    .filter('[value^="' + $(this).val() + '"]') // filter options with required value
    .show(); // and show them

  $("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
  <option value="1.A">1</option>
  <option value="1.B">2</option>
  <option value="1.C">3</option>
  <option value="2.D">4</option>
  <option value="2.E">5</option>
</select>

1 Ответ

0 голосов
/ 15 сентября 2018

Я исправил проблему с JavaScript.(не нужно использовать jQuery)

Пожалуйста, попробуйте использовать обновленный код ниже.

HTML: 

<div>
    <select name="select1" id="select1">
      <option value="1" data-sync="1">Status 1</option>
      <option value="2" data-sync="2">Status 2</option>
    </select>
</div>
<div>
    <select name="select2" id="select2">
      <option value="1">offer 1</option>
      <option value="1">offer 2</option>
      <option value="1">offer 3</option>
      <option value="1">offer 4</option>
      <option value="1">offer 5</option>
      <option value="2">offer 6</option>
      <option value="2">offer 7</option>
      <option value="2">offer 8</option>
      <option value="2">offer 9<option>
    </select>
</div>
<div>
  <select name="select3" id="select3">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="1">option 3</option>
    <option value="2">option 4</option>
  </select>
</div>

Javascript: 

document.getElementById("select1").onchange=function() {
    document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
        document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();

Проверьте приведенную ниже ссылку на рабочий код.

http://jsfiddle.net/f97u5nLa/33/

...