Cambiar la opción seleccionada de un elemento Seleccionar HTML

En mi HTML, tengo un <select>con tres <option>elementos. Quiero usar jQuery para verificar el valor de cada opción contra un Javascript var. Si coincide, quiero establecer el atributo seleccionado de esa opción. ¿Como podría hacerlo?

JavaScript vainilla

Usando JavaScript antiguo simple:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery

Pero si realmente quieres usar jQuery:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery: uso de atributos de valor

En caso de que sus opciones tengan atributos de valor que difieran de su contenido de texto y desee seleccionar mediante contenido de texto:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

Manifestación

Pero si tiene la configuración anterior y desea seleccionar por valor usando jQuery, puede hacer lo anterior:

var val = 3;
$('#sel').val(val);

DOM moderno

Para los navegadores que admiten document.querySelectory la HTMLOptionElement::selectedpropiedad, esta es una forma más sucinta de realizar esta tarea:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

Manifestación

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

Manifestación

Polímero

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

Manifestación

Angular 2

Nota: esto no se ha actualizado para la versión estable final.

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

Manifestación

Vue 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

Manifestación

Ninguno de los ejemplos que usan jquery aquí son realmente correctos, ya que dejarán la selección mostrando la primera entrada a pesar de que se haya cambiado el valor.

La forma correcta de seleccionar Alaska y hacer que la selección muestre el elemento correcto seleccionado con:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

Con jquery sería:

$('#state').val('AK').change();

Puede cambiar el valor del elemento select, que cambia la opción seleccionada a la que tiene ese valor, usando JavaScript:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

MANIFESTACIÓN

Margen

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

Manifestación

Quiero cambiar el valor y el contenido de texto de la opción seleccionada del elemento seleccionado (lo que vemos) a 'Mango'.

El código más simple que funcionó es el siguiente:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

Espero que ayude a alguien. La mejor de las suertes.
Vota si esto te ayudó.

Prueba esta demo

1. Seleccionar opción en función de su valor

   var vals = [2,'c'];
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.val() == vals[n]){
            $t.prop('selected', true);
            return;
         }
   });

2. Seleccionar opción en función de su texto

   var vals = ['Two','CCC'];                   // what we're looking for is different
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.text() == vals[n]){            // method used is different
            $t.prop('selected', true);
            return;
         }
   });

HTML de apoyo

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

Excelentes respuestas: aquí está la versión D3 para cualquiera que busque:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

Usé casi todas las respuestas publicadas aquí, pero no me siento cómodo con eso, así que busqué un paso más y encontré una solución fácil que se adapta a mis necesidades y siento que vale la pena compartirlas con ustedes.
En lugar de iterar por todas las opciones o usar JQuery , puede hacerlo usando JS central en pasos simples:

Ejemplo

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

Por lo tanto, debe conocer el valor de la opción para seleccionar.

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

¿Cómo utilizar?

selectOrganization(25); //this will select SONY from option List

Sus comentarios son bienvenidos :) AzmatHunzai.

Después de mucha búsqueda, probé @kzh en la lista de selección donde solo conozco optionel texto interno no el valueatributo, este código basado en la respuesta de selección lo usé para cambiar la opción de selección de acuerdo con la página actual urlen este formato http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

Esto mantendrá los urlparámetros mostrados como seleccionados para que sea más fácil de usar y el visitante sepa qué página o perfil está viendo actualmente.

Utilicé esto después de actualizar un registro y cambié el estado de la solicitud a través de ajax, luego realicé una consulta con el nuevo estado en el mismo script y lo puse en el nuevo estado del elemento de etiqueta de selección para actualizar la vista.

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

Espero que esto sea útil.

Versión Vanilla.JS ligeramente más ordenada. Suponiendo que ya haya solucionado la nodeListfalta .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

Sólo:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})