javascript - limpiar - eliminar opciones de un select jquery

Eliminar un elemento de un cuadro de selección

Question

¿Cómo elimino o agrego elementos a un cuadro de selección? Estoy ejecutando jQuery, si eso facilita la tarea. A continuación se muestra un cuadro de selección de ejemplo.

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

Answer 1

JavaScript

function removeOptionsByValue(selectBox, value)
{
for (var i = selectBox.length - 1; i >= 0; --i) {
if (selectBox[i].value == value) {
selectBox.remove(i);
}
}
}
function addOption(selectBox, text, value, selected)
{
selectBox.add(new Option(text, value || '''', false, selected || false));
}
var selectBox = document.getElementById(''selectBox'');
removeOptionsByValue(selectBox, ''option3'');
addOption(selectBox, ''option5'', ''option5'', true);

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

jQuery

jQuery(function($) {
$.fn.extend({
remove_options: function(value) {
return this.each(function() {
$(''> option'', this)
.filter(function() {
return this.value == value;
})
.remove();
});
},
add_option: function(text, value, selected) {
return this.each(function() {
$(this).append(new Option(text, value || '''', false, selected || false));
});
}
});
});
jQuery(function($) {
$(''#selectBox'')
.remove_options(''option3'')
.add_option(''option5'', ''option5'', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

Answer 2

Agregando / Eliminando valor dinámicamente sin código duro:

// eliminar valor de seleccionar dinámicamente

$("#id-select option[value=''" + dynamicVal + "'']").remove();

// Añadir valor dinámico para seleccionar

$("#id-select").append(''<option value="'' + dynamicVal + ''">'' + dynamicVal + ''</option>'');

Answer 3

Eliminar una opción:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

Añadir una opción:

$("#selectBox").append(''<option value="option5">option5</option>'');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

Answer 4

Encontré dos páginas que parecen útiles, está escrito para ASP.Net, pero se debe aplicar lo mismo:

1. Cómo agregar / eliminar elementos de una lista desplegable usando jQuery
2. expresiones de jQuery selector

Answer 5

Esto debería hacerlo:

$(''#selectBox'').empty();

Answer 6

Los siguientes enlaces serán de utilidad.

http://api.jquery.com/remove/

http://api.jquery.com/append/

Answer 7

Me parece que el complemento de manipulación de jQuery Select Box es útil para este tipo de cosas.

Puede eliminar fácilmente un elemento por índice, valor o expresión regular.

removeOption(index/value/regex/array[, selectedOnly])
Remove an option by
- index: $("#myselect2").removeOption(0);
- value: $("#myselect").removeOption("Value");
- regular expression: $("#myselect").removeOption(/^val/i);
- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

Para eliminar todas las opciones, puede hacer $("#myselect").removeOption(/./); .

Answer 8

Para quitar un artículo

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

Para agregar un artículo

$("#mySelect").append(''<option value="option1">Option</option>'');

Para comprobar una opción

$(''#yourSelect option[value=yourValue]'').length > 0;

Para eliminar una opción seleccionada

$(''#mySelect :selected'').remove();

Answer 9

Puede eliminar el elemento seleccionado con esto:

$("#selectBox option:selected").remove();

Esto es útil si tiene una lista y no un menú desplegable.

Answer 10

Si alguien necesita eliminar TODAS las opciones dentro de una selección, hice una pequeña función.

Espero que les sea útil

var removeAllOptionsSelect = function(element_class_or_id){
var element = $(element_class_or_id+" option");
$.each(element,function(i,v){
value = v.value;
$(element_class_or_id+" option[value="+value+"]").remove();
})
}

Solo hay que correr

removeAllOptionsSelect("#contenedor_modelos");

Answer 11

Solo para aumentar esto para cualquiera que busque, también puede:

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

y

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

Answer 12

Solo quiero sugerir otra forma de agregar una option . En lugar de establecer el value y el text como una cadena, también se puede hacer:

var option = $(''<option/>'')
.val(''option5'')
.text(''option5'');
$(''#selectBox'').append(option);

Esta es una solución menos propensa a errores al agregar valores y textos de opciones de forma dinámica.

Answer 13

Tuve que eliminar la primera opción de una selección, sin ID, solo una clase, así que usé este código con éxito:

$(''select.validation'').find(''option:first'').remove();

Answer 14

esto es seleccionar cuadro html

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

cuando desee eliminar totalmente y agregar la opción desde el cuadro de selección, puede usar este código

$("#selectBox option[value=''option1'']").remove();
$("#selectBox").append(''<option value="option1">Option</option>'');

en algún momento necesitamos ocultar y mostrar la opción del cuadro de selección, pero no eliminar, entonces puede usar este código

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

A veces es necesario eliminar la opción seleccionada del cuadro de selección y luego

$(''#selectBox :selected'').remove();
$("#selectBox option:selected").remove();

Cuando necesite eliminar todas las opciones, entonces este código

(''#selectBox'').empty();

Cuando se necesita la primera opción o la última, entonces este código

$(''#selectBox'').find(''option:first'').remove();
$(''#selectBox'').find(''option:last'').remove();

Answer 15

window.onload = function ()
{
var select = document.getElementById(''selectBox'');
var delButton = document.getElementById(''delete'');
function remove()
{
value = select.selectedIndex;
select.removeChild(select[value]);
}
delButton.onclick = remove;
}

Para agregar el elemento, crearía el segundo cuadro de selección y:

var select2 = document.getElementById(''selectBox2'');
var addSelect = document.getElementById(''addSelect'');
function add()
{
value1 = select2.selectedIndex;
select.appendChild(select2[value1]);
}
addSelect.onclick = add;

Aunque no jQuery.