如何根据另一个下拉列表的选择填充多个下拉列表

时间:2013-12-10 08:53:37

标签: javascript jquery html drop-down-menu

如何根据另一个下拉列表的选择填充多个下拉列表

我有这个下拉名称部分

<select name="section">
<option value="0">choose</option>
<option value="1">section1</option>
<option value="2">section2</option>
<option value="3">section3</option>
<option value="4">section4</option>
<option value="5">section5</option>
<option value="6">section6</option>
<option value="7">section7</option>
<option value="8">section8</option>
<option value="9">section9</option>
<option value="10">section10</option>
</select>

我有另外7个下拉名称:subject1,subject2,subject3,subject4,subject5,subject6,subject7

我想根据下拉菜单“部分”的选择填充7个不同值的下拉列表

例如,当我从下拉“部分”中选择section1时,它会填充

dropdown subject1 with "1"
dropdown subject2 with "2"
dropdown subject3 with "3"
dropdown subject4 with "4"
dropdown subject5 with "5"
dropdown subject6 with "6"
dropdown subject7 with "7"

当我从下拉“部分”中选择section2时,它会填充

dropdown subject1 with "a1"
dropdown subject2 with "a2"
dropdown subject3 with "a3"
dropdown subject4 with "a4"
dropdown subject5 with "a5"
dropdown subject6 with "a6"
dropdown subject7 with "a7"

等等

2 个答案:

答案 0 :(得分:0)

<强> HTML:

<select name="section" onchange="yourfunction();">
....
</select>

<强>使用Javascript:

yourfunction()
{
    // Your logic here...
}

答案 1 :(得分:0)

这将解决您的问题:

$('select').first().change(function () {    
$sub.hide();
if (this.selectedIndex > 0)
   $sub.eq(this.selectedIndex - 1).show();
}).change();

<强> working fiddle