CODEWITHSUNDEEP
javascript
user2465936
user2465936

Reputation: 1040

Javascript based on value in one drop down bow changes values in 2 other drop down boxes

Based on example https://stackoverflow.com/a/13104169/2465936 want to create such behavior:

Fiddle: http://jsfiddle.net/rigaconnect/Ppbk5/17/

3 drop down boxes. User chooses value in the first drop down box. If for example user choses Option 2 or Option 3 in the first drop down box, then value in the second and third drop down boxes changes to blank <option value="4"></option>

Here is 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>

And here is 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>

Code changes <option value="4"></option> only in one drop down box. I simply copied-paste javascript and modified variable and values. Something done incorrectly. And possible can do it with one javascript code.

Could you advice what is incorrect?

Update

Based on answer such code may be used

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

But need to think how to change javascript if drop down boxes are created using php array with foreach....

Upvotes: 0

Views: 2049

Answers (1)

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

first select option add the on change method to blank other two select option 

<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>

add in script blank function to set the value of other select option 

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

}
</script>

Upvotes: 5

Related Questions