填充基於另一個選擇表單字段

根據「規則」選項卡，在「+」一組表單域的克隆即加入的點擊運算符，屬性，運算符&閾值。

使用使用合約和閾值變量之間的關係創建的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); 
    } 
});

有沒有不同的方法呢？此外，它應該適用於每個克隆組，因爲我將使用所有這些值創建「表達式」字段。

任何幫助將不勝感激。謝謝。

來源

2017-08-29 we bendthetrend

用這個替換上面代碼中的第3行。它只會返回選定的值。

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

來源

2017-08-29 05:03:49 user3888958

它可以在選擇屬性選項和填充閾值時使用。但是，當您有多個克隆組時，更改一個屬性下拉選項也會更改所有閾值選定值。希望我的話能被理解。 –

你有沒有嘗試過這樣的：

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); 
    } 
});

我加索引，因此它可以靶向的當前元素。

來源

2017-08-29 05:13:53 adda82

它可以在選擇屬性選項和填充閾值時使用。但是，當您有多個克隆組時，更改一個屬性下拉選項也會更改所有閾值下拉值。希望我的話能理解 –

是的，它的效果很棒！非常感謝。另外，請您幫助我創建基於非克隆和克隆表單字段的選定值的表達式？ [例如溫度> TEMP-TH-25和溼度！= HUM-TH-25 ||溼度> = .....] –

很高興我可以幫助，當然讓我知道你需要做什麼，如果我可以，我會幫助你。 – adda82

爲了使它正常工作，首先要做的事情就是使這個複雜的實現是使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框架來減輕代碼的可維護性。從長遠來看，這種方法將變得非常難以維護。

來源

2017-08-29 06:23:41 masterpreenz

嗨，謝謝你的努力。您是否注意到在選擇選項後點擊「添加」或「刪除」會重置先前選擇的下拉菜單？ –

https://jsfiddle.net/4k8d2ez8/4/ man我在這裏粘貼了錯誤的upated url。 – masterpreenz

@masterpreez：嗨，我建議你不要改變應用程序的數據結構。我在小提琴中使用JSON變量，而在實際的情況下，它來自對API的ajax調用。您可以使用我的小提琴而不更改作爲數據變量的「合同」和「閾值」嗎？ –

填充基於另一個選擇表單字段

回答

相關問題