Si conoce el índice, el valor o el texto. también si no tiene una identificación para una referencia directa.

Esto , esto y esto son respuestas útiles.

Marcado de ejemplo

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

Un selector para obtener el elemento de opción del medio por valor es

$('.selDiv option[value="SEL1"]')

Para un índice:

$('.selDiv option:eq(1)')

Para un texto conocido:

$('.selDiv option:contains("Selection 1")')

EDITAR : Como se comentó anteriormente, el OP podría haber sido después de cambiar el elemento seleccionado del menú desplegable. En la versión 1.6 y superior, se recomienda el método prop ():

$('.selDiv option:eq(1)').prop('selected', true)

En versiones anteriores:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2 : después del comentario de Ryan. Es posible que no se desee una coincidencia en la "Selección 10". No encontré ningún selector que coincida con el texto completo, pero un filtro funciona:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : tenga cuidado, $(e).text()ya que puede contener una nueva línea que hace que la comparación falle. Esto sucede cuando las opciones están implícitamente cerradas (sin </option>etiqueta):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Si simplemente usa e.textcualquier espacio en blanco adicional, como el salto de línea final, se eliminará, lo que hará que la comparación sea más sólida.

Ninguno de los métodos anteriores proporcionó la solución que necesitaba, así que pensé que proporcionaría lo que funcionó para mí.

$('#element option[value="no"]').attr("selected", "selected");

Puedes usar el val()método:

$('select').val('the_value');

Por valor, lo que funcionó para mí con jQuery 1.7 fue el siguiente código, intente esto:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

Hay varias formas de hacer esto, pero el enfoque más limpio se ha perdido entre las mejores respuestas y muchos argumentos val(). Además, algunos métodos cambiaron a partir de jQuery 1.6, por lo que necesita una actualización.

Para los siguientes ejemplos, asumiré que la variable $selectes un objeto jQuery que apunta a la <select>etiqueta deseada , por ejemplo, a través de lo siguiente:

var $select = $('.selDiv .opts');

Nota 1: use val () para coincidencias de valores:

Para la coincidencia de valores, usar val()es mucho más simple que usar un selector de atributos:https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

La versión de establecimiento de .val()se implementa en selectetiquetas estableciendo la selectedpropiedad de una coincidencia optioncon las mismas value, por lo que funciona bien en todos los navegadores modernos.

Nota 2: use prop ('seleccionado', verdadero):

Si desea establecer el estado seleccionado de una opción directamente, puede usar prop(no attr) con un booleanparámetro (en lugar del valor de texto selected):

p.ej https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

Nota 3: permita valores desconocidos:

Si usa val()para seleccionar un <option>, pero el valor no coincide (puede suceder dependiendo de la fuente de los valores), entonces se selecciona "nada" y $select.val()regresará null.

Entonces, para el ejemplo que se muestra, y en aras de la robustez, podría usar algo como esto https://jsfiddle.net/1250Ldqn/:

var $select = $('.selDiv .opts');
$select.val("SEL2"); if ($select.val() == null) {
  $select.val("DEFAULT");
}

Nota 4 - coincidencia exacta del texto:

Si desea hacer coincidir por texto exacto, puede usar una filterfunción with. p.ejhttps://jsfiddle.net/yz7tu49b/2/:

var $select = $('.selDiv .opts'); $select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

aunque si puede tener espacios en blanco adicionales, es posible que desee agregar un recorte al cheque como en

    return $.trim(this.text) == "some value to match";

Nota 5 - coincidencia por índice

Si desea hacer coincidir por índice, simplemente indexe los hijos de la selección, por ejemplo https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts'); var index = 2; $select.children()[index].selected = true;

Aunque tiendo a evitar las propiedades DOM directas a favor de jQuery hoy en día, al código a prueba de futuro, por lo que también podría hacerse como https://jsfiddle.net/yz7tu49b/5/:

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

Nota 6: use change () para disparar la nueva selección

En todos los casos anteriores, el evento de cambio no se activa. Esto es por diseño para que no termine con eventos de cambio recursivos.

Para generar el evento de cambio, si es necesario, simplemente agregue una llamada al objeto .change()jQuery select. por ejemplo, el primer ejemplo más simple se convierte enhttps://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts'); $select.val("SEL2").change();

También hay muchas otras formas de encontrar los elementos usando selectores de atributos, como [value="SEL2"], pero debe recordar que los selectores de atributos son relativamente lentos en comparación con todas estas otras opciones.

Podrías nombrar la selección y usar esto:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Debe seleccionar la opción que desee.

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

Exactamente funcionará, pruebe los siguientes métodos

Para la opción de selección normal

<script>    
    $(document).ready(function() { $("#id").val('select value here');
       });
        </script>

Para seleccionar 2 opciones, la opción de disparo debe usar

<script>    
        $(document).ready(function() { $("#id").val('select value here').trigger('change');
           });
            </script>

Respondiendo a mi propia pregunta para la documentación. Estoy seguro de que hay otras formas de lograr esto, pero esto funciona y este código está probado.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() { $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ; var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected"); // $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected"); // $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected"); // $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

Para configurar el valor de selección con disparo seleccionado:

$('select.opts').val('SEL1').change();

Para configurar la opción desde un alcance:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

Este código usa el selector para encontrar el objeto seleccionado con condición, luego cambia el atributo seleccionado por attr().

Además, recomiendo agregar change()evento después de configurar el atributo selected, al hacer esto, el código se cerrará para cambiar la selección por usuario.

Usando jquery-2.1.4 , encontré que la siguiente respuesta me funciona:

$('#MySelectionBox').val(123).change();

Si tiene un valor de cadena, intente lo siguiente:

$('#MySelectionBox').val("extra thing").change();

Otros ejemplos no me funcionaron, por eso agrego esta respuesta.

Encontré la respuesta original en: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Yo uso esto, cuando conozco el índice de la lista.

$("#yourlist :nth(1)").prop("selected","selected").change();

Esto permite que la lista cambie y active el evento de cambio. El ": nth (n)" cuenta desde el índice 0

Prueba esto

solo usa seleccionar id de campo en lugar de #id (es decir, # select_name)

en lugar de valor de opción de usar su opción de selección de valor

 <script>
    $(document).ready(function() { $("#id option[value='option value']").attr('selected',true);
   });
    </script>

iré con: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Para Jquery elegido si envía el atributo a la función y necesita actualizar la opción de selección

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected'); $('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() { $("#gate option[value='']").prop('selected', true);
    });
    </script>

El $('select').val('the_value');ve la solución correcta y si tiene filas de la tabla de datos a continuación:

$row.find('#component').val('All');

Si no desea usar jQuery, puede usar el siguiente código:

document.getElementById("mySelect").selectedIndex = "2";

Gracias por la pregunta Espero que este código te funcione.

var val = $("select.opts:visible option:selected ").val();

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

o

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Hay algunas sugerencias por las que debería usar en proplugar de attr.Definitivamente usar, propya que he probado ambos y attrle darán resultados extraños, excepto en los casos más simples.

Quería una solución en la que la selección de selectopciones agrupadas arbitrariamente seleccionara automáticamente otra selectentrada en esa misma página. Por ejemplo, si tiene 2 menús desplegables, uno para países y otro para continentes. En este escenario, al seleccionar cualquier país, se seleccionó automáticamente el continente de ese país en el menú desplegable del otro continente.

$("#country").on("change", function() { //get continent var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true); }); $("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region"); //select continent wrongly with attr $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

Como se ve en el fragmento de código, propfunciona correctamente cada vez, pero attrno se selecciona correctamente una vez que se ha seleccionado la opción una vez.

Punto clave: estamos por lo general interesado en la propiedad del atributo, por lo que su seguro usar propmás de attren la mayoría de las situaciones.