如何根据下拉框＃1的输入更改下拉框＃2？ [英] How can I change drop down box #2 based on input from drop down box #1?

问题描述

我有两个下拉菜单。

 < form action =form.phpclass =inputlabelsenctype =multipart / form-dataid = new_assetmethod =post> 
< select id =asset_idname =asset [asset_id]> 
< option value =1> Trailer 1  -  Spanish< / option> 
< option value =2>预告片1  - 英文< /选项> 
< option value =3>预告片1  - 法文< /选项> 
< option value =4> Trailer 1  -  German< / option> 
< option value =5> Trailer 2  -  Spanish< / option> 
< option value =6>预告片2  - 英文< /选项> 
< option value =7> Trailer 2  -  French< / option> 
< option value =8> Trailer 2  -  German< / option> 
< / select> 
< br /> 
< select id =country_idname =material [country_id]> 
< option value =11>英格兰< / option> 
< option value =12>西班牙< / option> 
< option value =13>法国< / option> 
< option value =14>德国< / option> 
< / select> 
< / form> 
  

我希望下拉菜单2根据菜单1的值自动更改。我需要能够声明当用户选择Trailer 1 - Spanish或Trailer 2 - Spanish时，该国自动被选为西班牙。这个想法是，它可以节省用户不必选择国家。

任何帮助指引我朝着正确的方向将是非常重要的。

解决方案

这应该做你需要的（也处理其他语言）：

HTML

 < select id =asset_idname =asset [asset_id ]> 
< option value => - 选择预告片 - < / option> 
< option value =1> Trailer 1  -  Spanish< / option> 
< option value =2>预告片1  - 英文< /选项> 
< option value =3>预告片1  - 法文< /选项> 
< option value =4> Trailer 1  -  German< / option> 
< option value =5> Trailer 2  -  Spanish< / option> 
< option value =6>预告片2  - 英文< /选项> 
< option value =7> Trailer 2  -  French< / option> 
< option value =8> Trailer 2  -  German< / option> 
< / select> 
< br /> 
< select id =country_idname =material [country_id]> 
< option value => - 选择国家 - < / option> 
< option value =11>英格兰< / option> 
< option value =12>西班牙< / option> 
< option value =13>法国< / option> 
< option value =14>德国< / option> 
< / select> 
  

JavaScript

  var ddl1 = document.getElementById（'asset_id'）; 
 
 function updateCountry（e）{
 
 var asset = this.options [this.selectedIndex] .value，
 countryDDL = document.getElementById（'country_id'） ，
国家，i = countryDDL.options.length  -  1; 
 
 switch（资产）{
 case1：
 country = 12; 
休息; 
案例2：
 country = 11; 
休息; 
案例3：
 country = 13; 
休息; 
案例4：
国家= 14; 
休息; 
情况5：
国家= 12; 
休息; 
案例6：
国家= 11; 
休息; 
案例7：
 country = 13; 
休息; 
 case8：
 country = 14; 
休息; 
 
 
为（; i> -1; i--）{
 
 if（countryDDL.options [i] .value == country）{ 
 countryDDL.options [i] .selected = true; 
休息; 
} 
 
} 
 
} 
 
 ddl1.onchange = updateCountry; 
  

小提琴： http://jsfiddle.net/kboucher/uVMZF/

I have two drop down menus.

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

I want for drop down menu 2 to automatically change based on the value of menu 1. I need to be able to declare that when a user selects "Trailer 1 - Spanish" or "Trailer 2 - Spanish", the country is automatically selected as Spain. The idea is that it saves the user from having to select the country.

Any help in pointing me in the right direction would be very valued.

解决方案

This should do what you need (Also handles the other languages):

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/

这篇关于如何根据下拉框＃1的输入更改下拉框＃2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！