3

2 つのドロップダウン メニューがあります。

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

メニュー 1 の値に基づいてドロップダウン メニュー 2 が自動的に変更されるようにします。ユーザーが「予告編 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

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

ユーザーがトレーラーと一致しない国の組み合わせを選択できない限り、2番目のドロップダウンを設定しても、それらがそのように関連している場合はあまり意味がありません。最初のコントロールをドロップダウンにして、オプションにdata- *属性を追加し、ユーザーのラベルを入力してみませんか。

したがって、オプションは次のようになります。

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

2番目のオプションの値が必要な場合は、それらの国と値の組み合わせのグローバル配列ルックアップを設定できます。

もちろん、あなたのデザインの背後にある考えやあなたが計画したものはわかりませんが、選択が一致しなければならない場合、国を選択する能力を与える意味がわかりません。国でフィルタリングしてから、計画よりもその選択に基づいてオプションを非表示/表示する方がほぼ理にかなっています。必要がなければ、ユーザーとのやり取りの手段をできるだけ多く削除するように感じます。

于 2012-10-27T21:33:34.523 に答える
0

ドロップダウンが動的に構築されていると仮定すると、サーバーに小さなJavaScriptを生成させることになります。PHPコードでドロップダウンをマップできるため、出力は次のようになります。

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

次に、最初のドロップダウンの変更時にイベントハンドラーを設定し、言語マップから値を検索して2番目のドロップダウンを設定します。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 に答える