JSFiddle - React, Tailwind, and code Playground
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;