¿Cómo cambiar las opciones de <select> con jQuery?

271

Supongamos que hay una lista de opciones disponible, ¿cómo se actualiza <select>con nuevos <option>correos electrónicos?

Máscara
fuente

Respuestas:

600

Puede eliminar las opciones existentes utilizando el emptymétodo y luego agregar sus nuevas opciones:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

Si tiene sus nuevas opciones en un objeto, puede:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Editar: para eliminar todas las opciones, excepto la primera, puede usar el :gtselector para obtener todos los optionelementos con un índice mayor que cero y removeellos:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 
CMS
fuente
2
¿Cómo seguir siendo la primera opción cuando está vacío ()?
Máscara el
2
Si el uso de rutina de carga-seleccione a continuación, añadir lo siguiente para actualizar el selector de selección después de cambiar las opciones: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');. De lo contrario, las nuevas opciones no serán visibles en su lista de selección.
phn
¿Cómo puedo marcar una de estas opciones?
Darós
Personalmente, esta sintaxis me parece un poco más limpia para crear el nodo jQuery$el.append($('<option/>', { value: value, text: key }));
rorofromfrance
Gracias chicos. si tiene que establecer el valor seleccionado cuando estamos editando la página para el valor seleccionado predeterminado, podemos usar algo como esto en el ciclo para una iteración específica, podemos agregar $ el.append seleccionado ($ ('<opción />', {valor : valor, seleccionado: 'seleccionado', texto: clave}));
Desarrollador
79

Lancé la excelente respuesta de CMS en una extensión rápida de jQuery:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

Espera una matriz de objetos que contienen claves de "texto" y "valor". Entonces el uso es el siguiente:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);
ktusznio
fuente
14
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

donde comboBx es su ID de cuadro combinado.

o puede agregar opciones como cadena al innerHTML ya existente y luego asignar al innerHTML seleccionado.

Editar

Si necesita mantener la primera opción y eliminar todas las demás, puede usar

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
rahul
fuente
¿No eliminaste las viejas opciones?
Máscara
¿Desea borrar las antiguas o simplemente agregar nuevas opciones a las opciones existentes?
rahul el
5

Por alguna extraña razón esta parte

$el.empty(); // remove old options

de la solución CMS no funcionó para mí, así que en lugar de eso simplemente he usado esto

el.html(' ');

Y es funciona. Entonces mi código de trabajo ahora se ve así:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});
Draco
fuente
3

Eliminar y agregar elementos DOM es más lento que modificar uno existente.

Si sus conjuntos de opciones tienen la misma longitud, puede hacer algo como esto:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

En caso de que su nuevo conjunto de opciones tenga una longitud diferente, puede eliminar / agregar opciones vacías que realmente necesite, utilizando alguna técnica descrita anteriormente.

Yuri Gor
fuente
1

Si, por ejemplo, su código html contiene este código:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

Para cambiar la lista de opciones dentro de su selección, puede usar este código a continuación. cuando su nombre seleccione con nombre selectId .

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

En este ejemplo anterior, cambio la lista de opciones anterior por solo una nueva opción.

BERGUIGA Mohamed Amine
fuente
1
¿Por qué el OP debería intentar esto? Agregue una explicación de lo que hizo y por qué lo hizo de esa manera no solo para el OP sino para los futuros visitantes de SO.
Jay Blanchard
1

¿Esto ayuda?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;
vierzehn
fuente
3
Esta pregunta trata sobre agregar dinámicamente <opción> a una <selección>, no seleccionar una opción específica.
sisve
1

La vieja escuela de hacer las cosas a mano siempre ha sido buena para mí.

  1. Limpia la selección y deja la primera opción:

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. Si sus datos provienen de un Json o lo que sea (solo Concat los datos):

        var JSONObject = JSON.parse(data);
        newOptionsSelect = '';
        for (var key in JSONObject) {
            if (JSONObject.hasOwnProperty(key)) {
                var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
            }
        }
    
        $('#your_select_id').append( newOptionsSelect );
  3. Mi Json Objetc:

        [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

Esta solución es ideal para trabajar con Ajax y responde en Json desde una base de datos.

Toto
fuente
0

Si actualizamos <select>constantemente y necesitamos guardar el valor anterior:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');
Roman Yakoviv
fuente