3

我有两个下拉菜单。

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

任何帮助我指出正确方向的帮助都将非常有价值。

4

4 回答 4

3

这应该可以满足您的需要（也可以处理其他语言）：

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;

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

于 2012-10-27T21:03:03.633 回答
0

假设您的下拉列表是动态构建的，我会让您的服务器为您生成一些 javascript - PHP 代码可以映射它们，因此输出如下所示：

var _languageMap = {
    { 1: 12 },
    { 2: 11 },
    ...
    { 8: 14 }
};

然后在更改第一个下拉列表时设置一个事件处理程序，并通过从语言映射中查找值来设置第二个。如果您使用的是 jQuery，请尝试以下操作：

jQuery("#asset_id").change(function() {
    var trailerId = jQuery(this).val();
    var languageId = _languageMap[trailerId];
    jQuery("#country_id").val(languageId);
});

如果你不使用 jQuery，你可以用普通的 javascript 做同样的事情——你只需要查找下拉列表的事件处理程序——我只是不记得如何用老式的方式做到这一点。

于 2012-10-27T20:59:42.297 回答
0

JS小提琴

标记

<select id="asset_id" name="asset[asset_id]" onchange="selectCountry()">

Javascript

function selectCountry()
{
   var asset = document.getElementById('asset_id');
   var assetText = asset.options[asset.selectedIndex].text;



    var country_id = document.getElementById('country_id');

    if(assetText.toLowerCase().indexOf('spanish') > -1)
       country_id.value = 12;  //spain
    else if(assetText.toLowerCase().indexOf('german') > -1)
       country_id.value = 14;  //germany
    else if(assetText.toLowerCase().indexOf('english') > -1)
       country_id.value = 11;  //england
    else if(assetText.toLowerCase().indexOf('french') > -1)
       country_id.value = 13;  //france
}​
于 2012-10-27T21:12:07.877 回答
0

如果它们以这种方式相关，那么拥有第二个下拉菜单并没有多大意义，除非用户可以选择不匹配的预告片和国家/地区的组合。为什么不将您的第一个控件设为下拉菜单，在选项中添加 data-* 属性并为用户填写标签。

因此，您的选项将如下所示：

<option id="optT1Span" value="1" data-country="Spain">Trailer 1 - Spanish</option>

如果您需要第二个选项中的值，您可以设置这些国家/值组合的全局数组查找。

显然，我不知道你的设计背后的想法或你的计划，但如果选择必须匹配，那么我看不出赋予选择国家的能力有什么意义。按您的国家/地区过滤然后根据该选择隐藏/显示选项几乎比您计划的更有意义。我觉得你总是尽可能多地删除用户交互的途径，如果它们不是必要的。

于 2012-10-27T21:33:34.523 回答