establezca la opción «seleccionado» atributo de la dinámica creada opción

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/

Estás overthinking es:

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

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»

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.

//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);​​

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.

Esto funciona en FF, IE9

var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");

//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.

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");
    }
});

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();

select = document.getElementById('selectId');
var opt = document.createElement('option');
    opt.value = 'value';
    opt.innerHTML = 'name';
    opt.selected = true;
    select.appendChild(opt);

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>

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.

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.

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.

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

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.