在两个下拉选择器中使用多个<option>内的值</option>

时间:2013-08-26 21:55:52

标签: javascript jquery html drop-down-menu html-select

我的TWO下拉列表出现问题,而不是根据第一个框的选择显示特定值。目前,无论选择哪个第一个选项,都会显示所有值。

我目前正在使用Jquery 1.6和实际代码。请参阅演示here

以下是我的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>

现在您可以看到即时消息使用id=""能够引用哪个选项与哪个第一个选择框一起使用。我这样做是因为我需要为每个选项指定特定值。请参阅演示代码以获取更多信息,以及我想要实现的目标。

由于

1 个答案:

答案 0 :(得分:2)

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

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