javascript - 如何根据下拉框 #1 的输入更改下拉框 #2？

Question

我有两个下拉菜单。

<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 的值自动更改。我需要能够声明当用户选择“Trailer 1 - Spanish”或“Trailer 2 - Spanish”时，国家/地区是自动选择为西类牙。这个想法是它使用户不必选择国家/地区。

任何能为我指明正确方向的帮助都将非常有值(value)。

Answer 1

这应该可以满足您的需要(还可以处理其他语言):

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/