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.