У меня есть <select>
с числом <option>
s. Каждый из них имеет уникальное значение. Мне нужно отключить <option>
с заданным значением (не innerhtml).
У кого-нибудь есть идея, как?
У меня есть <select>
с числом <option>
s. Каждый из них имеет уникальное значение. Мне нужно отключить <option>
с заданным значением (не innerhtml).
У кого-нибудь есть идея, как?
С чистым Javascript вам придется перебирать каждую опцию и проверять ее значение индивидуально.
// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
(op[i].value.toLowerCase() == "stackoverflow")
? op[i].disabled = true
: op[i].disabled = false ;
}
Без включения нецелевых элементов:
// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
if (op[i].value.toLowerCase() == "stackoverflow") {
op[i].disabled = true;
}
}
С помощью jQuery вы можете сделать это с помощью одной строки:
$("option[value='stackoverflow']")
.attr("disabled", "disabled")
.siblings().removeAttr("disabled");
Без включения нецелевых элементов:
$("option[value='stackoverflow']").attr("disabled", "disabled");
Обратите внимание, что это не зависит от регистра. "StackOverflow" не будет равно "stackoverflow". Чтобы получить совпадение без учета регистра, вам придется циклически переключаться между ними, преобразовывая значение в нижний регистр, а затем проверять на это:
$("option").each(function(){
if ($(this).val().toLowerCase() == "stackoverflow") {
$(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
}
});
Без включения нецелевых элементов:
$("option").each(function(){
if ($(this).val().toLowerCase() == "stackoverflow") {
$(this).attr("disabled", "disabled");
}
});
Установите id для параметра, затем используйте get element по id и отключите его, когда значение x выбрано.
Пример
<body>
<select class="pull-right text-muted small"
name="driveCapacity" id=driveCapacity onchange="checkRPM()">
<option value="4000.0" id="4000">4TB</option>
<option value="900.0" id="900">900GB</option>
<option value="300.0" id ="300">300GB</option>
</select>
</body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){
document.getElementById("driveCapacity").value = "4000.0";
document.getElementById("4000").disabled = false;
}else{
document.getElementById("4000").disabled = true;
}
</script>
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');
function select_disable_options(selectid,vals){
var selected = false ;
$('#'+selectid+' option').removeAttr('selected');
$('#'+selectid+' option').each(function(i,elem){
var elid = parseInt($(elem).attr('value'));
if(vals){
if(vals.indexOf(elid) != -1){
$(elem).removeAttr('disabled');
if(selected == false){
$(elem).attr('selected','selected');
selected = true ;
}
}else{
$(elem).attr('disabled','disabled');
}
}else{
$(elem).removeAttr('disabled');
}
});
}
Здесь с JQ.. если кто-нибудь его ищет
Я также хотел бы дать вам идею отключить <option>
с заданным определенным значением (not innerhtml
). Я рекомендую ему с помощью jQuery
получить самый простой способ. Смотрите мой образец ниже.
HTML
Status:
<div id="option">
<select class="status">
<option value="hand" selected>Hand</option>
<option value="simple">Typed</option>
<option value="printed">Printed</option>
</select>
</div>
Javascript
Идея здесь в том, как отключить опцию " Printed
когда текущий Status
- " Hand
var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;
Вы можете увидеть, как это работает здесь:
По некоторым причинам другие ответы неоправданно сложны, это легко сделать в одной строке в чистом JavaScript:
Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;
или же
selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;
Производительность зависит от количества опций (чем больше опций, тем медленнее первый) и от того, можете ли вы опустить экранирование (вызов replace
) из второго. Также первый использует функции Array.find
и arrow, которые недоступны в IE11.
<select class="pets">
<option>Cat</option>
<option>Dog</option>
<option>Horse</option>
</select>
$(document).ready(function() {
$('.pets').children().each(function(index, element) {
if ($(element).text() == "Dog") {
$(this).prop('disabled', true);
}
});
});
Вы также можете использовать эту функцию,
function optionDisable(selectId, optionIndices)
{
for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
{
document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';
}
}