Question

这是我的小提琴：DEMO

根据＆＃34;规则＆＃34;选项卡，点击＆＃34; +＆＃34;克隆一组表单字段，即Join运算符，Attributes，Operator＆amp;阈值。

使用使用合约和阈值变量之间的关系创建的json（称为expressionDetails）填充属性下拉列表。

根据属性的选择，将填充阈值字段。

我可以为非克隆的属性和阈值实现此目的。但是，由于class / 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);
    }
});

这有不同的方法吗？此外，它应该适用于每个克隆组，因为我将使用所有这些值来创建＆＃34; Expression＆＃34;字段。

非常感谢任何帮助。谢谢。

Answer 1

用上面的代码替换上面代码中的第3行。它只会返回选定的值。

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

Answer 2

你有没有试过像：

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

相反

var z1 = $(".attributeExpr 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();
}

希望有所帮助

===
ALSO 抬头，看来你正在创建这样复杂的应用程序。我建议您应该使用JavaScript框架来简化代码的可维护性。从长远来看，这种方法将变得非常难以维护

根据另一个选择表单字段

3 个答案: