0

次のような2つの選択ボックスがあります。

<select id="bu_id">
  <option value="1">India</option>
  <option value="2">US</option>
  <option value="3">UK</option>
</select>

と

<select id="role_id">
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option> 
</select>

これで、オプション タグの 2 番目の選択ボックスのテキストが、1 番目の選択ボックスのユーザーの選択に従って変更される必要があります。たとえば、ユーザーが US オプションを変更した場合、2 番目の選択ボックスは次のようになります。

<select id="role_id">
   <option value="1">One</option>
   <option value="2">Two dollar</option>
   <option value="3">Three</option>
   <option value="4">Four dollar</option>
</select>

私は自分のコードを次のように書きました：

if($('#bu_id option:selected').text() == 'India'){
    $('#role_id option:contains("Two")').text('Two dollar');
    $('#role_id option:contains("Four")').text('Four dollar');
}

しかし、それはクロムではなくファイアフォックスで動作しています.この問題を解決するのを手伝ってもらえますか?

前もって感謝します。

4

1 に答える 1

0

クロムで動作しない理由がわかりません。通常<select>、最初<option>のがデフォルトです。マークアップでは、最初<option>は「India」であるため、コードが実行されます。このjsfiddleを参照してください。

ドキュメントでこれを行っていますready()か？change()イベントでこれをラップする必要があると思います。なぜあなたが 2 つのオプション (オプション 2 と 4) だけを変更しているのか、そしてなぜインドの通貨がドルなのか、私には理解できないからです。

以下のマークアップとスクリプトは単なる提案です。これがあなたがやろうとしていることかどうかはわかりませんが、アイデアを提供するだけです。

<select id="bu_id">
  <option value="Rupee">India</option>
  <option value="Dollar">US</option>
  <option value="Pound">UK</option>
</select>

<select id="role_id">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option> 
</select>

jQuery:

$('#bu_id').change(function(){
    var val = $(this).val();

    $('#role_id option').each(function(){
        var text = $(this).text();       
        text = text.split(' ')[0];

        if($(this).is(':first-child')){
            text = text+' '+val
        }else{
            text = text+' '+val+'s'
        }

        $(this).text(text)        
    });

}).trigger('change');

このjsfiddleを確認してください。

于 2013-12-04T12:14:20.100 に答える