Select 打开另一个 select （循环）

Question

我对编程有点陌生，所以我不知道如何解决我的问题。

所以我有一个 select id="one"，我想要的是当用户 selects 一个选项时它显示 select id="two" 而当用户 selects一个选项它显示 select id="three" 等等...

我尝试使用 'display=none'，但我不太喜欢这种方式，因为任何人都可以让 select 出现而无需 select 选项。有什么可行的方法吗？

这是我的第一个 select:

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

当用户选择一个选项时，这个 select 必须显示：

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

感谢您的宝贵时间，希望您能帮助我！

Answer 1

我认为这个问题与 select 事件没有绑定到动态创建的第二个 select(id="two") 有关。因此，当您创建新的 select 框时，请尝试通过 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
    });
});

Answer 2

这个怎么样？它非常粗糙，只能在 DOM 顺序显示下一个 select 的基础上工作。您可以将 data 属性添加到 select 以确定值更改时显示哪个 select。

$('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>

如果您担心有人显示第二个 select 而没有为第一个提交内容，那么您可以随时运行检查客户端以查看是否两个 select有值或检查服务器端。

Select 打开另一个 select （循环）

Select opens another select (loop)

html

html-select