Javascript 在多个应用程序中使用值<；选项>'；s位于两个下拉选择器内

我的两个下拉列表有问题，没有根据第一个框的选择显示特定值。当前，无论选择了哪个第一个选项，都会显示所有值

我目前正在实际代码中使用jquery1.6。见演示

下面是我的HTML的一个例子

<select name="column_select" id="column_select">
<option id="1" value="/search_option_1">First</option>
<option id="2" value="/search_option_2">Second</option>
<option id="3" value="/search_option_3">Third</option>
</select>

<select name="layout_select" id="layout_select">

<!-- Child options from Parent Option 1 -->
<option id="1" value="/first_value/one">1.1</option>
<option id="1" value="/first_value/two">1.2</option>

<!-- Child options from Parent Option 2 -->
<option id="2" value="/second_value/one">2.1</option>
<option id="2" value="/second_value/two">2.2</option>

<!-- Child options from Parent Option 3 -->
<option id="3" value="/third_value/one">3.1</option>
<option id="3" value="/third_value/two">3.2</option>
</select>

弗斯特
第二
第三
1.1
1.2
2.1
2.2
3.1
3.2

现在，您可以看到im使用

id=“

来参考哪个选项与哪个第一个选择框匹配。我这样做是因为我需要为每个选项指定特定的值。请参阅演示代码以了解更多信息以及我试图实现的目标

谢谢

---

现有文档中的所有其他内容看起来都很怪异和糟糕。扔掉这些行。

ID必须是唯一的，否则HTML将无效，仅供参考：D@tymeJV是的，我知道这一点，我只是不确定如何将这些选项与正确的家长选项联系起来。每个选项仍然有不同的值。您始终可以使用

this

的一个实例，但是您的两个选择都有ID，因此我相信@Ringo的答案会很好。我现在意识到，您可能会尝试在第二个选择框中显示不同的选项，具体取决于第一个选择框中选择的选项。这是真的吗？@Ringo你完全正确

$(document).ready(function() {
    $('#multi_select').click(function() {
      var url = 'http://www.urlimusing.com/' + $('#column_select').val() + $('#layout_select').val();
      window.location = url;
    });
});