选择下拉菜单后如何向其添加禁用验证 [英] How to add disable validation to a dropdown after it has been selected
问题描述
我有三个包含数据的下拉菜单，这三个下拉菜单在用户选择四个下拉菜单后被克隆.我的目标是一旦用户选择了可以正常工作的数据，就禁用每个下拉菜单.
现在的问题是，在第二次克隆三个下拉菜单之后，先前的三个下拉菜单在仍然无法为用户选择时启用了它们自己.
我的解决方案是，每当用户选择克隆前三个下拉列表的第四个下拉菜单时，我希望前三个列表保持不让用户返回选择任何数据的方式，并且将执行相同的步骤每次降到3相同，都将被克隆. 我希望这是有道理的.预先感谢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);
}
};
您使用的是相同的ID，因此，当您第二次克隆时，您最终得到的ddlProfileClone与其他人的相同.
您应该为他们提供一个ID和一个类，例如，每次克隆时，您为元素赋予CLASS ddlProfileClone和一个像'ddlProfileClone' + i这样的ID.
'i'是一个整数，每次克隆时都会增加一个整数，该克隆将在函数外部声明，以使id不会每次都重置或生成随机数.
编辑
这是我什至没有id或任何东西都可以想到的最简单的实现.
在该代码段中玩转并在其上构建
$('#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>
I have three drop downs containing data, these three drop downs get cloned after the user select the four drop down. my aim was to disable each drop down once the user has selected the data which works fine.
Now the problem is after the three drop down gets cloned for the second time the previous three drop downs enable themselves when they should still unable for the user to select.
my solution to be is every time the user select the fourth drop down which clone the previous three, i would want the previous three to stay unable for the user to go back to select any data and the the same procedures will be the same every time to three drop down get cloned.
i hope this made sense. thanks in advance
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);
}
};
You are using the same id so when you clone for the second time you end up with to ddlProfileClone and same for others.
What you should do is giving them an id and a class.For example each time you clone you give the element the CLASS ddlProfileClone and an ID like 'ddlProfileClone' + i.
'i' would be an integer that you increment every time you clone that you would declare outside of the function so that id doesn't get reset every time or a random generated number.
EDIT
Here is the simplest implementation i could come up with without even ids or anything.
Play around with the snippet and build on it
$('#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>
这篇关于选择下拉菜单后如何向其添加禁用验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
