根據對另一個選擇表單字段的選擇，填充選擇下拉列表

Question

這是我的小提琴： DEMO

在“規則”選項卡下，單擊“ +”，將克隆一組表單字段，即，聯接運算符，屬性，運算符和閾值。

使用下拉菜單（使用合約和閾值變量之間的關系創建）創建的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 = $(this).find('option:selected').text();

代替

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

嘗試一下，我已經在您的小提琴演示中對其進行了測試，並且可以正常工作。

$('.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事件偵聽器，這樣您就可以控制每個表單組的行為。

示例點擊這里

通過以編程方式填充它，您可以完全控制字段的行為。 然后，您可以通過迭代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框架來簡化代碼的可維護性。 從長遠來看，這種方法將很難維護