我需要禁用与价值选择“ - 已售完 - ”动态下拉菜单的列表。 我怎样才能用jQuery做到这一点很容易? 下面是HTML
<select id="field_0_1" class="text_select" name="field_0_1" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
<select id="field_0_2" class="text_select" name="field_0_2" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
<select id="field_0_3" class="text_select" name="field_0_3" onChange="">
<option value="">- Preferred Time -</option>
<option value="- Sold Out -">- Sold Out -</option>
<option value="2:30 - 4:00pm">2:30 - 4:00pm</option>
</select>
$("select option[value*='Sold Out']").prop('disabled',true);
演示
据编辑
$('#previous_select').on('change', function() {
// after creating the option
// try following
$("select option[value*='Sold Out']").prop('disabled',true);
});
工作演示 http://jsfiddle.net/BYkVW/ 或 http://jsfiddle.net/BYkVW/1/
希望它可以帮助需要:)
码
$("#field_0_1 option[value='- Sold Out -']").attr('disabled','disabled');
要么
$("#field_0_1 option[value='- Sold Out -']").prop('disabled','disabled');
工作图片
在这里,我也做了上面的查询解决方案。 下面演示链接:
演示: http://codebins.com/bin/4ldqp92
HTML:
<select id="field_0_1" class="text_select" name="field_0_1" onChange="">
<option value="">
- Preferred Time -
</option>
<option value="- Sold Out -">
- Sold Out -
</option>
<option value="2:30 - 4:00pm">
2:30 - 4:00pm
</option>
</select>
<select id="field_0_2" class="text_select" name="field_0_2" onChange="">
<option value="">
- Preferred Time -
</option>
<option value="- Sold Out -">
- Sold Out -
</option>
<option value="2:30 - 4:00pm">
2:30 - 4:00pm
</option>
</select>
<select id="field_0_3" class="text_select" name="field_0_3" onChange="">
<option value="">
- Preferred Time -
</option>
<option value="- Sold Out -">
- Sold Out -
</option>
<option value="2:30 - 4:00pm">
2:30 - 4:00pm
</option>
</select>
JQuery的:
$(function() {
$("select").click(function() {
$(this).find("option[value*='Sold Out']").prop("disabled", true);
});
});
演示: http://codebins.com/bin/4ldqp92
$("#ddlList option[value='jquery']").attr("disabled","disabled");
function lockDownDropDownList(ddlName) {
ddlName = "#" + ddlName;
var chosenValue = $(ddlName).val();
var downDownListItems = $(ddlName).children('option').map(function (i, e) {
return e.value || e.innerText;
}).get();
downDownListItems.forEach(function (item) {
if (item != chosenValue)
{
$("select option[value*='" + item + "']").prop('disabled', true);
}
});
}
如果有人想能够禁用下拉的文本,而不是值列表,这里就是我所做的:
$("#DDL option").filter(function () {
return $(this).text() === "Text 1" ||
$(this).text() === "Text 2" ||
$(this).text() === "Text 3";
}).prop("disabled", true);