Cómo configurar la ''opción seleccionada'' de una lista desplegable de selección con jQuery

set options select jquery

Question

Tengo la siguiente función jQuery:

$.post(''GetSalesRepfromCustomer'', {
    data: selectedObj.value
}, function (result) {
    alert(result[0]);
    $(''select[name^="salesrep"]'').val(result[0]);
});

result[0] es un valor que quiero establecer como el elemento selected en mi cuadro de selección. result[0] es igual a Bruce jones .

el cuadro de selección se llena con una consulta de base de datos, pero uno de los html representados es:

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

$(''select[name^="salesrep"]'').val(result[0]); no llena la opción seleccionada del cuadro de selección. También he probado $("#salesrep").val(result[0]); sin suerte

Cualquier ayuda apreciada.

así que lo que quiero es que la opción seleccionada / resaltada en la lista desplegable de ventas sea Bruce Jones.

HTML para ser:

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones" selected >Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>

Gracias de nuevo,

Guión completo

<script type="text/javascript"> 
    $(document).ready(function () {

           $("#customer").autocomplete( 
     { 
     source: "get_customers", 
     messages: 
     { 
     noResults: '''', 
     results: function() {} 
     }, 
     select: function( event, ui ) 
     { 
      var selectedObj = ui.item;        

     $.post(''GetSalesRepfromCustomer'', {data:selectedObj.value},function(result) { 
      alert(result[0]);
       var selnametest="Bruce Koller";
    $("#salesrep").val(selnametest);
     }); 

     } 
     });
         });


</script>

HTML renderizado es:

<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="RyanLubuschagne">Ryan Lubuschagne</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
</select>

Answer 1

Debe reemplazar YourID y value = "3" por los actuales.

$(document).ready(function() {
  $(''#YourID option[value="3"]'').attr("selected", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>

y valor = "3" para sus actuales.

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

<select id="YourID" >
<option value="1">A </option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>

Answer 2

Establezca el valor que lo establecerá como opción seleccionada para el menú desplegable:

$("#salesrep").val("Bruce Jones");

Aquí está trabajando Demo

Si todavía no funciona:

1. Por favor, compruebe los errores de JavaScript en la consola.
2. Asegúrate de incluir archivos jquery
3. su red no está bloqueando el archivo jquery si se usa externamente.
4. Verifique la fuente de su vista en algún momento la copia exacta de element stop jquery para que funcione correctamente

Answer 3

La coincidencia entre .val(''Bruce jones'') y value="Bruce Jones" .val(''Bruce jones'') entre mayúsculas y minúsculas. Parece que estás capitalizando a Jones en uno pero no al otro. Busque el origen de la diferencia, use id''s en lugar del nombre, o llame a .toLowerCase() en ambos.

Answer 4

Prueba esto :

$(''select[name^="salesrep"] option[value="Bruce Jones"]'').attr("selected","selected");

Simplemente reemplace la option[value="Bruce Jones"] por la option[value=result[0]]

Y antes de seleccionar una nueva opción, es posible que desee "deseleccionar" la anterior:

$(''select[name^="salesrep"] option:selected'').attr("selected",null);

Es posible que desee leer esto también: jQuery obtener texto de etiqueta de opción específica

Edición: utilizando jQuery Mobile, este enlace puede proporcionar una buena solución: jquery mobile: establecer valores de selección / opción

Answer 5

Una cosa que no creo que nadie haya mencionado, y un error estúpido que he cometido en el pasado (especialmente cuando se seleccionan de forma dinámica). .val () de jQuery''s no funcionará para una entrada de selección si no hay una opción con un valor que coincida con el valor proporcionado.

Aquí hay un violín explicando -> http://jsfiddle.net/go164zmt/

<select id="example">
    <option value="0">Test0</option>
    <option value="1">Test1</option>
</select>

$("#example").val("0");
alert($("#example").val());
$("#example").val("1");
alert($("#example").val());

//doesn''t exist
$("#example").val("2");
//and thus returns null
alert($("#example").val());

Answer 6

$(document).ready(function() {
  $(''#YourID option[value="3"]'').attr("selected", "selected");
  $(''#YourID option:selected'').attr("selected",null);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="YourID">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>