Подтвердить что ты не робот

Удалить значения из списка выбора в зависимости от условия

У меня есть следующая страница

<select name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select> 

Я хотел бы удалить определенные значения из моего select, если определенные условия верны.

например

if(frm.product.value=="F"){
  // remove Apple and Cars from the select list
}

Как это сделать, используя javascript

4b9b3361

Ответ 1

Укажите идентификатор для выбранного объекта, например, так:

<select id="mySelect" name="val" size="1" >
    <option value="A">Apple</option>
    <option value="C">Cars</option>
    <option value="H">Honda</option>
    <option value="F">Fiat</option>
    <option value="I">Indigo</option>                    
</select> 

Вы можете сделать это на чистом JavaScript:

var selectobject = document.getElementById("mySelect");
for (var i=0; i<selectobject.length; i++) {
    if (selectobject.options[i].value == 'A')
        selectobject.remove(i);
}

Но, как показывают другие ответы, гораздо проще использовать jQuery или какую-либо другую библиотеку JS.

Ответ 2

Проверьте решение JQuery здесь

$("#selectBox option[value='option1']").remove();

Ответ 3

с чистым javascript

var condition = true; // your condition
if(condition) {
    var theSelect = document.getElementById('val');
    var options = theSelect.getElementsByTagName('OPTION');
    for(var i=0; i<options.length; i++) {
        if(options[i].innerHTML == 'Apple' || options[i].innerHTML == 'Cars') {
            theSelect.removeChild(options[i]);
            i--; // options have now less element, then decrease i
        }
    }
}

не протестирован с IE (если кто-то может подтвердить это...)

Ответ 4

Как уже упоминалось, при удалении опции длина элемента select уменьшается. Если вы просто хотите удалить одну опцию, это не проблема, но если вы намереваетесь удалить несколько опций, у вас могут возникнуть проблемы. Некоторые предлагали уменьшить индекс вручную при удалении опции. По моему мнению, уменьшение индекса внутри цикла for не очень хорошая идея. Вот почему я бы предложил немного другой цикл for, в котором мы перебираем все опции сзади.

var selectElement = document.getElementById("selectId");

for (var i = selectElement.length - 1; i >= 0; i--){
  if (someCondition) {
    selectElement.remove(i);
  }
}

Если вы хотите удалить все опции, вы можете сделать что-то вроде этого.

var selectElement = document.getElementById("selectId");

while (selectElement.length > 0) {
  selectElement.remove(0);
}

Ответ 5

Если вы используете JQuery, он выглядит следующим образом:

Дайте идентификатор вашему SELECT

<select name="val" size="1" id="val">
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

$("#val option[value='A'],#val option[value='C']").remove();

Ответ 6

Индекс я изменится, как только он удалит 1-й элемент. Этот код удалит значения 52-140 из комбинированного поля wifi channel

obj = document.getElementById("id");
if (obj)
{
        var l = obj.length;
        for (var i=0; i < l; i++)
        {
            var channel = obj.options[i].value;

            if ( channel >= 52 &&  channel <= 140 )
            {
                obj.remove(i);
                i--;//after remove the length will decrease by 1 
            }
        }
    }

Ответ 7

document.getElementById(this).innerHTML = '';

Поместите его в ваш if-case. То, что он делает, это просто проверить текущий объект в документе и заменить его на ничего. Сначала вы сначала перейдете через список, я предполагаю, что вы уже это делаете, поскольку у вас есть это, если.

Ответ 8

Вы можете использовать:

if ( frm.product.value=="F" ){
    var $select_box = $('[name=val]');
    $select_box.find('[value=A],[value=C]').remove(); 
}

Обновить. Если вы немного измените свой поле выбора на

<select name="val" size="1" >
  <option id="A" value="A">Apple</option>
  <option id="C" value="C">Cars</option>
  <option id="H" value="H">Honda</option>
  <option id="F" value="F">Fiat</option>
  <option id="I" value="I">Indigo</option>                    
</select> 

решение, отличное от jQuery, будет

if ( frm.product.value=="F" ){
    var elem = document.getElementById('A');
    elem.parentNode.removeChild(elem);
    var elem = document.getElementById('C');
    elem.parentNode.removeChild(elem);
}

Ответ 9

if(frm.product.value=="F"){
    var select = document.getElementsByName('val')[0];
    select.remove(0);
    select.remove(1);
}

Ответ 10

Вам нужно перейти к его родительскому объекту и удалить его там в javascript.

"Javascript не позволит элементу совершить самоубийство, но он допускает детоубийство"..:)

попробуйте это,

 var element=document.getElementsByName(val))
 element.parentNode.removeChild(element.options[0]); // to remove first option

Ответ 11

Это должно сделать это

document.getElementsByName("val")[0].remove(0);
document.getElementsByName("val")[0].remove(0);

Проверьте скрипт здесь

Ответ 12

В качестве альтернативы вы также можете выполнить это с помощью getElementsByName

<select id="mySelect" name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select> 

Таким образом, при сопоставлении значения параметра "C" мы можем удалить "Автомобили" из списка.

var selectobject = document.getElementsByName('val')[0];
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == 'C' )
    selectobject.remove(i);
  }

Ответ 13

Для сброса всех параметров ru Важно en ЗА: удалить (0) - Важно: 0

var select = document.getElementById("element_select");
var length = select.length;
for (i = 0; i < length; i++) {
     select.remove(0);
 //  or
 //  select.options[0] = null;
} 

Ответ 14

Удаление опции

$("#val option[value='A']").remove();