Удалить Выберите вариант с конкретным значением Использование Prototype JS

Question

С помощью этого HTML:

<select id='someid'> 
    <option value='0'>Value 0</option> 
    <option value='1'>Value 1</option> 
</select> 

Как я могу удалить <option value='0'>Value 0</option> от выбора поля с помощью Prototype JS?

Answer 1

Вам не нужен Prototype JS для этого.

Удаление параметра по индексу:

var select = document.getElementById('someid') 
 
select.removeChild(select.options[0])

<select id='someid'> 
 
    <option value='0'>Value 0</option> 
 
    <option value='1'>Value 1</option> 
 
</select>

Удаление вариант с конкретным value:

var select = document.getElementById('someid') 
 
select.removeChild(getOptionByValue(select, '0')) 
 

 
function getOptionByValue (select, value) { 
 
    var options = select.options; 
 
    for (var i = 0; i < options.length; i++) { 
 
     if (options[i].value === value) { 
 
      return options[i] 
 
     } 
 
    } 
 
    return null 
 
}

<select id='someid'> 
 
    <option value='0'>Value 0</option> 
 
    <option value='1'>Value 1</option> 
 
</select>

Или, вдохновленный this answer:

(Edit:RobG submitted this technique before me; все кредиты в дальнейшем ему. Я видел его комментарий критикуя мой ответ и начал редактировать свой пост, соответственно, но не прокручивать вниз достаточно далеко, чтобы увидеть его ответ, а, который рассмотрел этот вопрос уже.)

var select = document.getElementById('someid') 
 
select.removeChild(select.querySelector('option[value="0"]'))

<select id='someid'> 
 
    <option value='0'>Value 0</option> 
 
    <option value='1'>Value 1</option> 
 
</select>

Answer 2

Вы можете использовать селектор, чтобы получить опцию с определенным значением, а затем удалить ее. В следующем примере используется querySelector, но вы также можете перебрать все параметры и найти одно из них с требуемым значением и удалить их одинаково.

function removeOption() { 
 
    var optValue = document.getElementById('i0').value; 
 
    var errorEl = document.getElementById('errorMessage'); 
 
    var optElement = document.querySelector('option[value="' + optValue + '"]'); 
 
    if (optElement) { 
 
    errorEl.textContent = ''; 
 
    optElement.parentNode.removeChild(optElement); 
 
    } else { 
 
    errorEl.textContent = 'There is no option with value "' + optValue + '"'; 
 
    } 
 
}

#errorMessage { 
 
    background-color: white; 
 
    color: red; 
 
}

<select id='someid'> 
 
    <option value='0'>Value 0</option> 
 
    <option value='1'>Value 1</option> 
 
</select> 
 
<br> 
 
Remove option with value: 
 
    <input id="i0"> 
 
    <button onclick="removeOption()">Remove option</button> 
 
    <br> 
 
    <span id="errorMessage"></span>