[英]Javascript based on value in one drop down bow changes values in 2 other drop down boxes
基于示例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。...
首先选择选项,将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.