我有两个下拉菜单。
<form action="form.php" class="inputlabels" enctype="multipart/form-data" id="new_asset" method="post">
<select id="asset_id" name="asset[asset_id]">
<option value="1">Trailer 1 - Spanish</option>
<option value="2">Trailer 1 - English</option>
<option value="3">Trailer 1 - French</option>
<option value="4">Trailer 1 - German</option>
<option value="5">Trailer 2 - Spanish</option>
<option value="6">Trailer 2 - English</option>
<option value="7">Trailer 2 - French</option>
<option value="8">Trailer 2 - German</option>
</select>
<br />
<select id="country_id" name="material[country_id]">
<option value="11">England</option>
<option value="12">Spain</option>
<option value="13">France</option>
<option value="14">Germany</option>
</select>
</form>
我希望下拉菜单 2 根据菜单 1 的值自动更改。我需要能够声明,当用户选择“预告片 1 - 西班牙语”或“预告片 2 - 西班牙语”时,该国家/地区会自动选择为西班牙。这个想法是让用户不必选择国家/地区。
任何帮助我指明正确方向的帮助都将非常有价值。
这应该可以满足您的需要(还可以处理其他语言):
HTML
<select id="asset_id" name="asset[asset_id]">
<option value=""> - Select Trailer - </option>
<option value="1">Trailer 1 - Spanish</option>
<option value="2">Trailer 1 - English</option>
<option value="3">Trailer 1 - French</option>
<option value="4">Trailer 1 - German</option>
<option value="5">Trailer 2 - Spanish</option>
<option value="6">Trailer 2 - English</option>
<option value="7">Trailer 2 - French</option>
<option value="8">Trailer 2 - German</option>
</select>
<br />
<select id="country_id" name="material[country_id]">
<option value=""> - Select Country - </option>
<option value="11">England</option>
<option value="12">Spain</option>
<option value="13">France</option>
<option value="14">Germany</option>
</select>
JavaScript
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 "1":
country = 12;
break;
case "2":
country = 11;
break;
case "3":
country = 13;
break;
case "4":
country = 14;
break;
case "5":
country = 12;
break;
case "6":
country = 11;
break;
case "7":
country = 13;
break;
case "8":
country = 14;
break;
}
for ( ; i > -1 ; i-- ) {
if ( countryDDL.options[i].value == country ) {
countryDDL.options[i].selected = true;
break;
}
}
}
ddl1.onchange = updateCountry;
Fiddle: http://jsfiddle.net/kboucher/uVMZF/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)