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

我认为该问题与选择事件未绑定到动态创建的第二个select（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
    });
});

Answer 2

这个怎么样？这非常粗糙，只能在以DOM顺序显示下一个选择的基础上工作。您可以在选择中添加<RelativeLayout xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root_relativelayout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:clipToPadding="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal"> </RelativeLayout> </RelativeLayout>属性，以确定更改值时显示哪个选择。

data

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

select {
   display: none
}

如果您担心有人显示第二个选择，而没有为第一个选择提交任何东西，那么您始终可以运行check客户端以查看两个选择是否都具有值或check服务器端。

选择打开另一个选择（循环）

2 个答案: