基於一個下拉菜單中的值的Javascript更改其他兩個下拉框中的值

Question

基於示例https://stackoverflow.com/a/13104169/2465936要創建這樣的行為：

小提琴： http : //jsfiddle.net/rigaconnect/Ppbk5/17/

3個下拉框。 用戶在第一個下拉框中選擇值。 例如，如果用戶在第一個下拉框中選擇了選項2或選項3，則第二個和第三個下拉框中的<option value="4"></option>將更改為空白<option value="4"></option>

這是HTML

<select id="asset_id" name="asset[asset_id]">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4"></option>
</select>
<br />
<select id="country_id" name="material[country_id]">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4"></option>
</select>
<br />
<select id="country_id1" name="material1[country_id1]">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4"></option>
</select>

這是javascript

<script type="text/javascript">

$(document).ready(function(){
var ddl1 = document.getElementById( 'asset_id' );
function updateCountry ( e ) {

var asset = this.options[ this.selectedIndex ].value, countryDDL= document.getElementById( 'country_id' ), country, i = countryDDL.options.length - 1;

switch ( asset ) {
case "2": country = 4;
break;
case "3": country = 4;
break;
}

for ( ; i > -1 ; i-- ) {
if ( countryDDL.options[i].value == country ) {
countryDDL.options[i].selected = true;
break;
}
}

}

ddl1.onchange = updateCountry;
});

</script>


<script type="text/javascript">

$(document).ready(function(){
var ddl2 = document.getElementById( 'asset_id' );
function updateCountry1 ( e ) {

var asset1 = this.options[ this.selectedIndex ].value, countryDDL1= document.getElementById( 'country_id1' ), country1, i = countryDDL1.options.length - 1;

switch ( asset1 ) {
case "2": country1 = 4;
break;
case "3": country1 = 4;
break;

}

for ( ; i > -1 ; i-- ) {
if ( countryDDL1.options[i].value == country1 ) {
countryDDL1.options[i].selected = true;
break;
}
}

}

ddl2.onchange = updateCountry1;
});

</script>

代碼僅在一個下拉框中更改<option value="4"></option> 。 我只是復制粘貼了javascript並修改了變量和值。 做錯了什么。 並且可以用一個JavaScript代碼來做到這一點。

您能建議什么不正確嗎？

更新

基於答案，可以使用此類代碼

function blank() {
if ( document.getElementById('assed_id').selectedIndex == 2 ) {
document.getElementById('country_id').selectedIndex=4;
document.getElementById('country_id1').selectedIndex=4;
}
}

但是需要考慮如果使用帶foreach的php數組創建下拉框時如何更改javascript。...

Answer 1

首先選擇選項，將on change方法添加為空白，其他兩個選擇選項

<select id="asset_id" name="asset[asset_id]" onchange="blank(this.value)">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4"></option>
</select> 

添加腳本空白功能以設置其他選擇選項的值

<script>
function blank(ch)
{
    if(ch!=1)
    {
    document.getElementById('country_id').selectedIndex=4;
    document.getElementById('country_id1').selectedIndex=4;
    }  

}
</script>