Jquery：いくつかのラジオボタンに応じて選択項目を変更します

Question

ユーザーが選択するラジオボタンに応じて、選択/ドロップダウンボックス内の選択肢を変更するWebフォームを作成しています。私はこれを達成する方法を発見した、私はこのようにそれを行う：

var arrayType1=["A", "B", "C"]; 
var arrayType2=["D", "E", "F"]; 
var arraySubType1=["A1", "B1"]; 
var arraySubType2=["C1", "C2"]; 
var mapType={ rbtA : arrayType1, rbtB : arrayType2 } 

$('#rbtA, #rbtB').change(function() { 
    $("#selectType option").remove(); 
    $.each(mapType[this.id], function(i, val) { 
    var opt = $("<option />"); 
    opt.appendTo($("#selectType")).text(val).val(val); 
    }); 
}); 

これは動作します：ここで

<INPUT TYPE="radio" NAME="mainType" id="rbtA" Value="RadiobuttonA" onClick=0>Option 1<br> 
<INPUT TYPE="radio" NAME="maalertype" id="rbtB" Value="RadiobuttonB" onClick=0>Option 2<br> 

<INPUT TYPE="radio" NAME="subType" id="rbtSubA" Value="SubA" />Sub-option 1 
<INPUT TYPE="radio" NAME="subType" id="rbtSubB" Value="SubB" />Sub-option 2 

<b>Make your selection: </b><br> 
<SELECT id="selectType" style="width: 150" NAME="Spenning"> 
    <OPTION selected="selected"></OPTION> 
</SELECT> 

はjqueryのです。ここでは、ユーザーがrbtSubAまたはrbtSubBのいずれかを選択した場合、dropdownbox selectTypeのオプションをarraySubType1またはarraySubType2の代替に変更します。

$('#rbtSubA, #rbtSubB').change(function() { 
    if ($('#rbtSubA').is(':checked')){ 
    //I thought I could do it as simple as changing the content of the value mapType 
    mapType={ rbtA : arraySubType1, rbtB : arrayType2 }; 
    $("#selectType option").remove(); 
    $.each(mapType[this.id], function(i, val) { 
     var opt = $("<option />"); 
     opt.appendTo($("#selectType")).text(val).val(val); 
    }); 
    } 
    if ($('#rbtSubB').is('checked')){ 
    //vice versa 
    } 
}); 

私はこれをChromeで実行し、[ツール] - > [開発ツール]をオンにしました。私は、rbtAとrbtB間selectTypeの変更の内容を交互に、私はrbtSubA、

をselecetとき、私は、エラーメッセージ

"Uncaught TypeError: Cannot read property 'length' of undefined.

を得るとき、私は、誰もが何を見ることができ、ここでは未定義されるかもしれない変数を参照することはできませんこれは間違っていますか？それとも、これが問題を引き起こしている場合、これはいくつかのOTH

Answer 1

わからない中で行われなければならない、しかし、あなたが:checked疑似クラスセレクタを探してshoudl、ないchecked：そこにあるようにも

if ($('#rbtSubB').is(':checked')){ 

、それが見えます次の行が孤立"を持つ問題：

mapType={ rbtA : arraySubType1, rbtB : arrayType2" }; 

私はあなたが欲しい推測している：

mapType={ rbtA : arraySubType1, rbtB : arrayType2 }; 

これは 'select A'コードにあるとすれば、それがあなたのエラーの原因だと思われます。

Answer 2

私はあなたのコード内の2つの問題を参照してください。

：IDはrbtSubAとrbtSubB、ないrbtAとrbtB

ご使用mapVoltageの代わりmapTypeは

UPDATEある

• を試してみよう：

  $('#rbtSubA, #rbtSubB').change(function() { 
      if ($(this).is(':checked')){ 
      //I thought I could do it as simple as changing the content of the value mapType 
      mapType={ rbtSubA : arraySubType1, rbtSubB : arraySubType2 }; 
      $("#selectType option").remove(); 
      $.each(mapType[this.id], function(i, val) { 
       var opt = $("<option />"); 
       opt.appendTo($("#selectType")).text(val).val(val); 
      }); 
      } 
  });