Выбор открывает другой выбор (цикл)

Question

Я в некотором роде новичок в программировании, поэтому понятия не имею, как решить мою проблему.

Итак, у меня есть select id="one", и я хочу, чтобы, когда пользователь выбирает параметр, он отображал select id="two" и когда пользователь выбирает опцию, он показывает select id="three" и т. Д. *

Я пробовал с 'display = none', но мне не очень нравится этот способ, потому что любой может сделать выборпоказывать без выбора опции.Есть ли какой-нибудь возможный способ сделать это?

Вот мой первый выбор:

<select class="form-control" id="one" required>
    <option value="a">a</option>
    <option value="b">b</option>
</select>

И когда пользователь выбирает опцию, этот выбор должен отображаться:

<select class="form-control" id="two" required>
    <option value="c">c</option>
    <option value="d">d</option>
</select>

Спасибо, что уделили мне время, и я надеюсь, что вы мне поможете!

Answer 1

Как насчет этого?Это очень грубо и работает только на основе показа следующего выбора в порядке DOM.Вы можете добавить атрибут data в выборку, чтобы определить, какой из них будет отображаться при изменении значения.

$('select').change(function(){
  if ($(this).val()) {
    $(this).next('select').show();
  }
});

$('select:first').show();

select {
   display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="">- please select -</option>
  <option value="a">a</option>
  <option value="b">b</option>
</select>

<select>
  <option value="">- please select -</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>

<select>
  <option value="">- please select -</option>
  <option value="e">e</option>
  <option value="f">f</option>
</select>

Если вас беспокоит, что кто-то показывает второй выбор и не отправляет что-то для первого, тогда вы всегда можете запустить проверку на стороне клиента, чтобы увидетьесли оба выбора имеют значение или проверьте сторону сервера.

Answer 2

Я думаю, что проблема связана с событием выбора, не привязанным к динамически созданному второму выбору (id = "two").Поэтому попробуйте добавить прослушиватель событий через Jquery при создании нового окна выбора.

$("#one").on('change', function () {
    // Add second select box with id="two" here 
     $('<select id="two"><option></option></select><br/>').appendTo('body');
    //After adding select add the event listener
    $("#two").on("change", function(){
        // Write what you want to do here
    });
});