jqueryのhtmlの操作が選択入力

Question

上では動作しません。しかし、私は2番目の入力からオプションBを選択することはできません、ドロップダウンから「E」を選択し、コードを実行し、別の入力ボックスが表示されhttp://jsfiddle.net/7FfMd/6/

を参照してください。

どうすれば修正できますか？

何らかの理由で、最初の入力からオプション "D"を再度選択すると、2番目の選択ボックスも更新されません。

var testVar= jQuery('#placeholder2').val(); 

はまた

var testVar = jQuery('#placeholder2 select').val(); 

、あるべき：あなたが入力のvalを取得していなかったが、入力を含むDIVのvalを取得した

おかげ

Answer 1

これは、両方のドロップダウンを囲むdivでchangeイベントをキャッチするためです。 2番目のドロップダウンを変更すると、イベントハンドラがトリガされ、選択した場所のドロップダウンを削除し、新しいドロップダウンに置き換えます。

変更イベントを親要素にバインドする場合は、すべてのドロップダウンを再作成しないように、変更が行われたドロップダウン（event.targetを使用）をチェックする必要があります。

jQuery('.change').delegate('select', 'change', function() { ... }); 

各選択のためのイベントをバインドする方が簡単かもしれません、そして、あなたはウィッヒドロップダウンをチェックする必要はありません：あなたは、イベントハンドラをバインドするdelegateを使用している場合は、thisは変更が行われた要素が含まれていますイベントを引き起こしたあなたがdelegateを使用する場合は、要素本家のイベントをバインドすることができ、まだ存在しますが、あなたは彼らが識別できるようにドロップダウンに、クラス、名前またはIDを配置する必要がありません。

jQuery('.change').delegate('#firstDropdown', 'change', function() { ... }); 
jQuery('.change').delegate('#secondDropdown', 'change', function() { ... }); 

Answer 2

changeサブスクライバは、divではなくselectにのみ存在する必要があります（2番目のselectがch anged）：

jQuery('.change').change(function() { 

は、更新されたバージョンのため

jQuery('.change select').change(function() { 

See hereである必要があります。

Answer 3

問題がありますchangeイベントハンドラを、<select>要素を含む<div>要素にバインドしていることを確認してください。これらの要素のいずれかを変更すると、changeイベントは<div>にバブルします。それは最初のものでうまくいきますが、2番目のコードを変更すると、そのコードが再び実行され、<select>要素全体が置き換えられます。

Answer 4

あなたは

var testVar= jQuery('#placeholder2').val(); 

で選択した値にアクセスしている。これはdiv要素ではなく、選択から.val()を取得しようとするためです。これを試してみてください：

var testVar= jQuery('#placeholder2 select').val(); 

Answer 5

新しい要素を追加するときに、あなたの前に適用される方法が適用されていないということを忘れないでください。

新しい要素にイベントコードを適用する必要があります。

Answer 6

クラス.changeを持つdivを作成しています。したがって、関数はその子によるすべての変更によって処理されます。

は、このコードを見てください：

http://jsfiddle.net/7FfMd/13/

Answer 7

あなたのjqueryのは間違っていました。 は、ここに私の答え マークアップが

<div class='change'> 
    <div id="placeholder2" style="width:600px;"> 
     <select> 
      <option selected="selected">D</option> 
     <option >E</option> 
     </select> 
    </div> 
    <div id="placeholder" style="width:600px;"></div> 
</div> 

jQueryのは、このようにする必要があり、以下のようです。

jQuery('#placeholder2>select').change(function(){ 
    var testVar= $(this).val(); 
    alert(testVar); 
    if (testVar == "D") 
    { 
     var htmlString = '<select><option>C</option></select>'; 
     jQuery('#placeholder').html(htmlString); 
    } else 
    { 
     var htmlString = '<select><option>A</option><option>B</option></select>'; 
     jQuery('#placeholder').html(htmlString); 
    } 
});