Question

我想做一个依赖于另一个select的select选项，我看到有一种方法使用具有固定值的数组，但每次在表单上添加一个新的表单字段时都会重新加载我的数组。我希望像我选择op1时那样，然后它只在第二次选择时显示op1选项。

<select id="id1" name="optionshere">
     <option relone="op1">opt one</option>
     <option relone="op2">opt two</option>
</select>

<select id="id2" name="resulthere">
    <option relone="op1">ans 1 op1</option>
    <option relone="op1">ans 2 op2</option>
    <option relone="op2">ans 1 op2</option>
</select>

有什么想法吗？

感谢所有

Answer 1

如果Jquery是一个选项，你可以选择这样的东西：

    <script type='text/javascript'>
    $(function() {
        $('#id1').change(function() {
            var x = $(this).val();
            $('option[relone!=x]').each(function() {
               $(this).hide();
            });
            $('option[relone=x]').each(function() {
               $(this).show();
            });
        });
    });
    </script>

然后展开：您可以通过多种方式解决这种困境，具体取决于您的答案池的变化程度。

如果您只对使用vanilla javascript感兴趣，那么让我们从基础开始。您将要查看html的“onchange”事件，因此：

<select onchange="myFunction()">

直接从w3schools网站上，在Html onchange事件属性中：

onchange属性触发元素值的时刻改变了。

这将允许您根据此元素的值做出决定。然后你的js里面可能会从这里分支出来：

您可以使用 Ajax 并将该值作为get变量传递给它，以便从单独的文件中获取这些选项。
您可以通过.getElementbyId("id2")和.getElementsByTagName("option")的组合从第二个div中获取所有选项，然后在每个循环中检查其各自的“relone”属性，并隐藏那些不匹配的属性，并展示那些做的事。

真的，这完全取决于你想要做什么，但我个人只会去Jquery方法

Answer 2

这是一个没有jQuery的方法：

当您在第一个选择框中选择一个选项时，它将隐藏与其重定位不匹配的所有内容。

iterator.remove();

var id1 = document.getElementById("id1");
var id2 = document.getElementById("id2");

id1.addEventListener("change", change);

function change() {
  for (var i = 0; i < id2.options.length; i++)
    id2.options[i].style.display = id2.options[i].getAttribute("relone") == id1.options[id1.selectedIndex].getAttribute("relone") ? "block" : "none";
  id2.value = "";
}

change();

使用js选择依赖项

2 个答案: