如何將禁用驗證添加到已經選擇的下拉列表中

Question

此發佈已張貼我沒有收到我的問題的投票，但沒有人給出了建議的解決方案，所以這就是爲什麼我重新發布的原因希望得到任何人的建議。

當我解釋我的問題時與我同牀。我有三個包含數據的下拉菜單，這三個下拉菜單在用戶選擇四個下拉菜單後被克隆。我的目標是在用戶選擇可正常工作的數據後禁用每個下拉菜單。

現在的問題是，在三次下拉得到克隆後，前三次下拉使得他們自己仍然無法讓用戶選擇。

我的解決方案是每次用戶選擇克隆前三個的第四個下拉列表，我希望以前的三個列表都不能讓用戶返回以選擇任何數據，並且相同的程序將會每三次下拉相同的克隆。

我希望這是有道理的。在此先感謝

HTML：

<option value="AND Quantity <= ">Less Than Or Equal To</option> 
    <option value="AND Quantity >= ">Greater Than Or Equal To</option> 
</select> 
<input id="js-ilterValue" type="number" min="0" placeholder="Characteristic Value" style="height: 39px; width: 166px;" /> 
<button id="js-AddValueFilter" class="mini-button" type="button" onclick="AddValue(document.getElementById('js-ilterValue').value)">+</button> 
</div> 

<div id="ANDORLabel" class="editor-label" style="width: 157px;"></div> 

    <div id="ANDORContainer" style="margin-bottom: 10px;"> 
     <select id="ddlANDOR" onchange="ddlANDORChange(this)">> 
      <option value="">---Add On Statement---</option> 
      <option value="AND">Both Statements are True</option> 
      <option value="OR">Either Statement is True</option> 
     </select> 
    </div> 

的Jquery：

function ddlANDORChange(obj) { 

var currentLambdaExpression = $('#js-LambdaString').val(); 
var newLambdaExpression = null; 

var currentUIExpression = $('#js-FilterString').val(); 
var newUIExpression = null; 

var currentAndOrString = $('#binaryStringAndOr').val(); 

if (currentLambdaExpression.endsWith(")")) { 
    newLambdaExpression = currentLambdaExpression + " " + obj.value + " "; 
    newUIExpression = currentUIExpression + " " + obj.options[obj.selectedIndex].text + " "; 

    if (obj.value == 'AND') 
    { 
     $('#binaryStringAndOr').val(currentAndOrString + '1'); 
    } 
    else if (obj.value == 'OR') 
    { 
     $('#binaryStringAndOr').val(currentAndOrString + '0'); 
    } 
    $('#js-LambdaString').val(newLambdaExpression); 
    $('#js-FilterString').val(newUIExpression); 

    // Copies the dropdowns above, need to find a away to add the onchange code without repeating it 

    $('#container:last').before($('#ddlProfile').clone().prop('id', 'ddlProfileClone').prop('disabled', false).show()); 
    $('#container:last').before($('#ddlOption').clone().prop('id', 'ddlOptionClone').prop('disabled', false).show()); 
    $('#container:last').before($('#js-FilterValue').clone().prop('id', 'js-FilterValue').prop('disabled', false).show()); 
    $('#container:last').before($('#js-AddValueFilter').clone().prop('id', 'js-AddValueFilterClone').prop('disabled', false).show()); 

    $('#container:last').before($('#ANDORLabel').clone().prop('id', 'ANDORLabelClone').show()); 
    $('#container:last').before($('#ANDORContainer').clone().prop('id', 'ANDORContainerClone').show()); 


    if ($('ddlProfileClone').show()) { 
     document.getElementById("ddlProfileClone").disabled = false; 
     alert("it is new "); 
     if ($('#ddlProfileClone').prop('disabled', false).on('change ' , function() { 

       document.getElementById("ddlProfileClone").disabled = true; 
       alert("it will return to it is new "); 

     }) 
     ); 
     else if ($('#ddlProfileClone').prop('disabled', false).on('change ' == false, function() { 

       document.getElementById("ddlProfileClone").disabled = false; 
       alert("it"); 

     }) 
      ); 

     } 

    counter++; 
    $('#AndOrCounter').val(counter); 
} 

};

Answer 1

您正在使用相同的ID，因此當您第二次克隆時，您最終得到的結果爲ddlProfileClone，對於其他人也是如此。

你應該做的是給他們一個id和一個類。例如每次你克隆你給元素類ddlProfileClone和一個ID，如'ddlProfileClone' + i。

'i'是一個整數，你每增加一次你就會增加一個整數，你會在函數之外聲明，這樣id不會每次都被重置，或者隨機生成一個數字。

編輯

這是最簡單的實現我能想出甚至沒有IDS或任何東西。

玩的片段，並建立在它

$('#ANDORContainer').on('change', '.ddlANDOR', function() { 
 

 
    $(this) 
 
    .prop('disabled', true) 
 
    .clone() 
 
    .prop('disabled', false) 
 
    .appendTo('#ANDORContainer'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="ANDORContainer" style="margin-bottom: 10px;"> 
 
    <select class="ddlANDOR" data-count="0"> 
 
    <option value="">---Add On Statement---</option> 
 
    <option value="AND">Both Statements are True</option> 
 
    <option value="OR">Either Statement is True</option> 
 
    </select> 
 
</div>