別の選択フォームフィールドここ

Question

の選択に基づいて選択し、ドロップダウンを移入することは、私のバイオリンです演算子、属性、演算子&しきい値。

コントラクトとしきい値変数の間の関係を使用して作成されたjson（expressionDetails）を使用して、属性ドロップダウンが設定されます。

属性の選択に基づいて、しきい値フィールドが設定されます。

クローン化されていない属性としきい値に対してこれを達成できました。しかし、クラス/ IDの重複のため、すべてのクローン属性が同じクラスを保持し、それらの値が（var z1内で）連結されているため、クローン属性の値を取得できません。

//Appending option to "cloned" thresold field based on choice of attribute 
$('.attributeExpr').on('change', function(e) { 
    $('.thresholdExpr').empty(); 
    var z1 = $(".attributeExpr option:selected").text();      
    console.log(z1); 
    var a1 = expressionDetails[z1]; 
    console.log(a1); 
    for (var i1 = 0; i1 < a1.length; i1++) { 
     var b1 = a1[i1].name; 
     // alert(b1); 
     var opt1 = $("<option>").text(b1); 
     // console.log(opt1); 
     $('.thresholdExpr').append(opt1); 
    } 
}); 

別の方法がありますか？その後、これらの値をすべて使用して「式」フィールドを作成するため、クローングループごとに機能するはずです。

ご協力いただければ幸いです。ありがとうございました。

Answer 1

上記のコードの3行目をこれに置き換えます。選択した値のみを返します。

var z1 = $("option:selected",$(this)).text(); 

Answer 2

はあなたのような何かを試してみました：代わりに

var z1 = $(".attributeExpr option:selected").text(); 

を

var z1 = $(this).find('option:selected').text(); 

を私はあなたのフィドルのDEMOでそれをテストしてきたし、それが働いている、これを試してみてください。

$('.attributeExpr').on('change', function(e) { 
    var index = $(this).index('.attributeExpr'); 
    $('.thresholdExpr:eq('+index+')').empty(); 
    var z1 = $(this).find("option:selected").text();     
    console.log(z1); 
    var a1 = expressionDetails[z1]; 
    console.log(a1); 
    for (var i1 = 0; i1 < a1.length; i1++) { 
    var b1 = a1[i1].name; 
    // alert(b1); 
    var opt1 = $("<option>").text(b1); 
    // console.log(opt1); 
    $('.thresholdExpr:eq('+index+')').append(opt1); 
    } 
}); 

インデックスを追加して、現在の要素をターゲットにできるようにしました。

Answer 3

expressionsBuilder formgroup option fieldsをダイナミックにすることは、特別にそのような複雑な実装を適切に行うためにまず行うべきことです。つまり、JavaScriptで作成され、HTMLでハードコードされていないことを意味します。

次に、作成した個々のフィールドごとにchangeイベントリスナーを割り当てます。この方法で、すべてのフォームグループの動作を制御できます。プログラム的にそれを移入することにより

example click here

あなたはフィールドの挙動を完全にコントロールを持っています。あなたは、このようなexpressions変数反復することによって、各フィールドとすべての値を取得できます。

for (var i = 0; i < expressions.length; i++) 
{ 
    var id = expressions[i]; 
    var theAttribute = $("#" + id).find("[name='attribute']").val(); 
    var theOperator = $("#" + id).find("[name='operator']").val(); 
    var theThreshold = $("#" + id).find("[name='threshold']").val(); 
} 

希望もアップ

===
頭を助け、あなたがそのような複合体を作成している表示されます応用。 JavaScriptフレームワークを使用してコードのメンテナンス性を向上させることをお勧めします。このアプローチは、長期的には維持するのが非常に難しくなるでしょう。