Tengo una creados dinámicamente seleccione la opción utilizando una función de javascript. seleccione el objeto es

<select name="country" id="country">
</select>

cuando la función js es ejecutado, el «país» objeto

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

y muestra «Indonesia» como predeterminada la opción seleccionada. nota : no es selected="selected" atributo de esa opción.

entonces la necesidad de establecer selected="selected" atributo «Indonesia», y yo uso este

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

usando firebug, puedo ver el «Indonesia» opción como esta

<option value="ID" selected="selected">Indonesia</option>

pero no en IE (probado en IE 8).

y, a continuación, he intentado usar jQuery

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

falla tanto en el FFX y el IE.

Necesito el «Indonesia» opción a tener selected="selected" atributo así que cuando hago clic en el botón de reset, se selecciona «Indonesia» de nuevo.

cambio de la función js para crear dinámicamente el «país» de las opciones no es una opción. la solución debe trabajar tanto en FFX y el IE.

gracias

InformationsquelleAutor tsurahman | 2011-01-04

16 Comentarios

  1. 26

    Buena pregunta. Usted tendrá que modificar el código HTML en sí, en vez de depender de las propiedades DOM.

    var opt = $("option[val=ID]"),
        html = $("<div>").append(opt.clone()).html();
    html = html.replace(/\>/, ' selected="selected">');
    opt.replaceWith(html);

    El código agarra la opción elemento de Indonesia, clones y lo pone en un nuevo div (no en el documento) para recuperar el pleno de la cadena HTML: <option value="ID">Indonesia</option>.

    A continuación, hace una cadena de reemplazar a agregar el atributo selected="selected" como una cadena, antes de cambiar a la opción original con esta nueva.

    He probado en IE7. Consulte con el botón de reset funciona correctamente aquí: http://jsfiddle.net/XmW49/

    • javascript única solución hubiera sido mejor
  2. 105

    Estás overthinking es:

    var country = document.getElementById("country");
    country.options[country.options.selectedIndex].selected = true;
    • Eso no es lo que el OP está pidiendo. OP quiere que el botón de reset para el trabajo.
    • «overthinking». correcto +1
    • Bueno.. esa no es la respuesta a lo que se le pidió, pero me gusta de todos modos, ya estaba buscando este tipo de enfoque =)
    • Al parecer, de lo que otros han dicho no coincide con la pregunta. Sin embargo, era exactamente lo que yo necesitaba, así que gracias!
  3. 23

    En lugar de modificar el código HTML en sí, sólo debe establecer el valor que desee de la relación opción de elemento:

    $(function() {
        $("#country").val("ID");
    });

    En este caso, «ID» es el valor de la opción de «Indonesia»

    • De hecho, este es el enfoque correcto.
    • Esto no establece el seleccionado etiqueta html dentro de la pestaña opciones
    • Esto debe configurar correctamente para Indonesia: $(«#país»).val(«ID»);
  4. 13

    Tantas respuestas incorrectas!

    Para especificar el valor que un campo de formulario debería volver a restablecer el formulario, utilice las siguientes propiedades:

    • Casilla de verificación o botón de radio: defaultChecked
    • Cualquier otro <input> de control: defaultValue
    • Opción de la lista desplegable: defaultSelected

    Así, para especificar la opción actualmente seleccionada como predeterminada:

    var country = document.getElementById("country");
    country.options[country.selectedIndex].defaultSelected = true;

    Puede ser una buena idea para establecer la defaultSelected valor para cada opción, en caso de que uno de ellos había sido previamente establecida:

    var country = document.getElementById("country");
    for (var i = 0; i < country.options.length; i++) {
        country.options[i].defaultSelected = i == country.selectedIndex;
    }

    Ahora, cuando el formulario se restablece, la opción seleccionada será la que se especifica.

    • Gracias por esto, defaultSelected es el camino correcto…
  5. 11
    //get the OPTION we want selected
    var $option = $('#SelectList').children('option[value="'+ id +'"]');
    //and now set the option we want selected
    $option.attr('selected', true);​​
    • debe ser var $opt = $(‘opción[value=’+ id +’]’); $opt.attr(‘selected’,’seleccionado’);
    • Respuesta actualizada a una más moderna solución
    • La solución que estaba buscando! Esto permite identificar a la opción con el valor requerido! Gracias a u @corradio!
  6. 9

    Lo que quiero hacer es establecer selectedIndex atributo del cuadro de selección.

    country.options.selectedIndex = index_of_indonesia;

    Cambiar el atributo «seleccionado» generalmente no funcionan en IE. Si usted realmente quiere que el comportamiento que describes, te sugiero que escribir un javascript personalizado la función de reset para restablecer todos los otros valores en el formulario a sus valores predeterminados.

  7. 6

    Esto funciona en FF, IE9

    var x = document.getElementById("country").children[2];
    x.setAttribute("selected", "selected");
  8. 2
    //Get <select> object
    var sel = $('country');
    
    //Loop through and look for value match, then break
    for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }
    
    //Select index 
    sel.options.selectedIndex = i;

    Bastante el loh.

    • no es así maksud saya mas, pas de carga Indonesia memang dah ter-seleccionar, jd di Indonesia uit harus ada tambahan atributo selected=»selected», gunanya kalo optionnya dipindahin ke negara lain tru haga clic en restablecer, nanti balik lg ke Indonesia 😀
    • Ma’af saya bule así no lancar banget, así tal vez pake Bahasa Inggris saja. 😛 @Sam katanya atributo de la uit cuma para el HTML, kalo Javascript lain lagi, pake selectedIndex.
    • El selected='selected' atributo es por lo general sólo para el código HTML. Si desea utilizar Javascript para hacer esto, usted debe utilizar selectedIndex. De lo contrario, usted podría tratar de obj.setAttribute("selected","selected").
    • selamat datang di Indonesia 😀 creo que voy a usar Box9 respuesta
    • El bucle for de aquí debe ser: for(i=0;i<selectBox.longitud;i++) { if(selectBox[i].valor==»ID») { break; } } El [i] faltaba, a mirar en realidad cada opción
  9. 1

    Podría buscar todos los valores de las opciones hasta que encuentre la correcta.

    var defaultVal = "Country";
    $("#select").find("option").each(function () {
    
        if ($(this).val() == defaultVal) {
    
            $(this).prop("selected", "selected");
        }
    });
  10. 1

    Esto debería funcionar.

    $("#country [value='ID']").attr("selected","selected");

    Si usted tiene la función de llamadas vinculado al elemento simplemente seguir con algo parecido

    $("#country").change();
  11. 1
    select = document.getElementById('selectId');
    var opt = document.createElement('option');
        opt.value = 'value';
        opt.innerHTML = 'name';
        opt.selected = true;
        select.appendChild(opt);
  12. 1

    Hacer opción defaultSelected

    HTMLOptionElement.defaultSelected = true;     //JS
    $('selector').prop({defaultSelected: true});  //jQuery  

    HTMLOptionElement MDN

    Si el elemento SELECT ya se ha agregado el documento (estática o dinámica), para establecer una opción para el Atributoselected y hacer sobrevivir un HTMLFormElement.reset()defaultSelected se utiliza:

    JS:

    const EL_country = document.querySelector('#country');
    EL_country.value = 'ID';   //Set SELECT value to 'ID' ("Indonesia")
    EL_country.options[EL_country.selectedIndex].defaultSelected = true; //Add Attribute selected to Option Element
    
    document.forms[0].reset(); //"Indonesia" is still selected

    HTML:

    <form>
      <select name="country" id="country">
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="HR">Croatia</option>
        <option value="ID">Indonesia</option>
        <option value="ZW">Zimbabwe</option>
      </select>
    </form>

    Los anteriores también el trabajo de generar las opciones de dinámicamente, y que (sólo después de) desea establecer una opción para ser defaultSelected.

    JS:

    const countries = {
      AF: 'Afghanistan',
      AL: 'Albania',
      HR: 'Croatia',
      ID: 'Indonesia',
      ZW: 'Zimbabwe',
    };
    
    const EL_country = document.querySelector('#country');
    
    //(Bad example. Ideally use .createDocumentFragment() and .appendChild() methods)
    EL_country.innerHTML = Object.keys(countries).reduce((str, key) => str += `<option value="${key}">${countries[key]}</option>`, ''); 
    
    EL_country.value = 'ID';
    EL_country.options[EL_country.selectedIndex].defaultSelected = true;
    
    document.forms[0].reset(); //"Indonesia" is still selected

    HTML:

    <form>
      <select name="country" id="country"></select>
    </form>

    establezca la opción

    Hacer opción defaultSelected mientras que la dinámica de la creación de opciones

    A hacer una opción selected al rellenar el Elemento SELECT, el uso de la Opción() constructor MDN

    var optionElementReference = new Option(text, value, defaultSelected, selected);

    JS:

    const countries = {
      AF: 'Afghanistan',
      AL: 'Albania',
      HR: 'Croatia',
      ID: 'Indonesia',     //<<< make this one defaultSelected
      ZW: 'Zimbabwe',
    };
    
    const EL_country = document.querySelector('#country');
    const DF_options = document.createDocumentFragment();
    
    Object.keys(countries).forEach(key => {
      const isIndonesia = key === 'ID';  //Boolean
      DF_options.appendChild(new Option(countries[key], key, isIndonesia, isIndonesia))
    });
    
    EL_country.appendChild(DF_options);
    
    document.forms[0].reset(); //"Indonesia" is still selected

    HTML:

    <form>
      <select name="country" id="country"></select>
    </form>

    En la demo anterior Documento.createDocumentFragment se utiliza para prevenir la representación de los elementos en el interior de la catedral en un bucle. En cambio, el fragmento que contiene todas las Opciones) se anexa al Seleccionar sólo una vez.


    SELECCIONE.valor vs OPCIÓN.setAttribute vs OPCIÓN.seleccionado vs OPCIÓN.defaultSelected

    Aunque algunos (mayores) de los navegadores interpretan la OPCIÓN del selected atributo como un «cadena» estado, el WHATWG las Especificaciones de HTML html.spec.whatwg.org estado que debe representar un valor Booleano selectedness

    La selectedness de una opción es un elemento boolean estado, inicialmente falsa. Salvo especificación en contrario, cuando el elemento es creado, su selectedness se debe establecer en true si el elemento tiene un atributo seleccionado.

    html.spec.whatwg.org – Opción selectedness

    uno puede correctamente deducir que sólo el nombre selected en <option value="foo" selected> es suficiente para establecer un truthy estado.


    Prueba de comparación de los diferentes métodos

    JS:

    const EL_select = document.querySelector('#country');
    const TPL_options = `
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="HR">Croatia</option>
    <option value="ID">Indonesia</option>
    <option value="ZW">Zimbabwe</option>
    `;
    //https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver
    const mutationCB = (mutationsList, observer) => {
    mutationsList.forEach(mu => {
    const EL = mu.target;
    if (mu.type === 'attributes') {
    return console.log(`* Attribute ${mu.attributeName} Mutation. ${EL.value}(${EL.text})`);
    }
    });
    };
    //(PREPARE SOME TEST FUNCTIONS)
    const testOptionsSelectedByProperty = () => {
    const test = 'OPTION with Property selected:';
    try {
    const EL = [...EL_select.options].find(opt => opt.selected);
    console.log(`${test} ${EL.value}(${EL.text}) PropSelectedValue: ${EL.selected}`);
    } catch (e) {
    console.log(`${test} NOT FOUND!`);
    }
    } 
    const testOptionsSelectedByAttribute = () => {
    const test = 'OPTION with Attribute selected:'
    try {
    const EL = [...EL_select.options].find(opt => opt.hasAttribute('selected'));
    console.log(`${test} ${EL.value}(${EL.text}) AttrSelectedValue: ${EL.getAttribute('selected')}`);
    } catch (e) {
    console.log(`${test} NOT FOUND!`);
    }
    } 
    const testSelect = () => {
    console.log(`SELECT value:${EL_select.value} selectedIndex:${EL_select.selectedIndex}`);
    }
    const formReset = () => {
    EL_select.value = '';
    EL_select.innerHTML = TPL_options;
    //Attach MutationObserver to every Option to track if Attribute will change
    [...EL_select.options].forEach(EL_option => {
    const observer = new MutationObserver(mutationCB);
    observer.observe(EL_option, {attributes: true});
    });
    }
    //-----------
    //LET'S TEST! 
    console.log('\n1. Set SELECT value');
    formReset();
    EL_select.value = 'AL'; //Constatation: MutationObserver did NOT triggered!!!!
    testOptionsSelectedByProperty();
    testOptionsSelectedByAttribute();
    testSelect();
    console.log('\n2. Set HTMLElement.setAttribute()');
    formReset();
    EL_select.options[2].setAttribute('selected', true); //MutationObserver triggers
    testOptionsSelectedByProperty();
    testOptionsSelectedByAttribute();
    testSelect();
    console.log('\n3. Set HTMLOptionElement.defaultSelected');
    formReset();
    EL_select.options[3].defaultSelected = true; //MutationObserver triggers
    testOptionsSelectedByProperty();
    testOptionsSelectedByAttribute();
    testSelect();
    console.log('\n4. Set SELECT value and HTMLOptionElement.defaultSelected');
    formReset();
    EL_select.value = 'ZW'
    EL_select.options[EL_select.selectedIndex].defaultSelected = true; //MutationObserver triggers
    testOptionsSelectedByProperty();
    testOptionsSelectedByAttribute();
    testSelect();
    /* END */
    console.log('\n*. Getting MutationObservers out from call-stack...');

    HTML:

    <form>
      <select name="country" id="country"></select>
    </form>

    Aunque la prueba 2. el uso de .setAttribute() parece a primera de la mejor solución, ya que tanto la Propiedad del Elemento y Atributo se unísono, puede llevar a la confusión, especialmente porque .setAttribute espera dos parámetros:

    EL_select.options[1].setAttribute('selected', false);
    //<option value="AL" selected="false"> //But still selected!

    realmente hacer la opción seleccionado

    Se debe recurrir a las .removeAttribute() o tal vez .setAttribute('selected', ???) a otro valor? O debe uno leer el estado mediante .getAttribute('selected') o mediante el uso de .hasAttribute('selected')?

    Lugar de la prueba 3. (y 4.) el uso de defaultSelected da la resultados esperados:

    • Atributo selected como un llamado Selectedness estado.
    • Propiedad selected en el Elemento Objeto, con un valor Booleano.
  13. 0

    Para establecer la opción de entrada en tiempo de ejecución, ajuste el ‘checked’ valor. (incluso si no es una casilla de verificación)

    elem.checked=true;

    Donde elem es una referencia a la opción de ser seleccionado.

    Así que para el problema anterior:

    var country = document.getElementById("country");
    country.options[country.options.selectedIndex].checked=true;

    Esto funciona para mí, incluso cuando las opciones no están envueltos en una .

    Si todas las etiquetas de compartir el mismo nombre, se debe desmarcar cuando el nuevo se comprueba.

  14. 0

    Damos cuenta que esta es una vieja cuestión, pero con la versión más reciente de JQuery ahora usted puede hacer lo siguiente:

    $("option[val=ID]").prop("selected",true);

    Esto realiza lo mismo que Box9 la respuesta seleccionada en una línea.

    • Es option[value=ID] y no option[val=ID].
  15. 0

    Las ideas en esta página fueron útiles, pero como siempre mi situación era diferente. Así, en modal de bootstrap /express nodo js /aws beanstalk, esto funcionó para mí:

    var modal = $(this);
    modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");

    Donde mi select ID = "cJourney" y de la lista desplegable, el valor se almacena en la variable: vcJourney

  16. -1

    Yo estaba tratando de hacer algo como esto usando el $(...).val() función, pero la función no existe. Resulta que usted puede ajustar manualmente el valor de la misma manera que lo hace para un <input>:

    //Set value to Indonesia ("ID"):
    $('#country').value = 'ID'

    …y conseguir que se actualiza automáticamente en el select. Funciona en Firefox al menos, es posible que desee probar en los otros.

Dejar respuesta

Please enter your comment!
Please enter your name here