web-dev-qa-db-fra.com

Comment définir l'option 'sélectionnée' d'une liste déroulante avec jquery

J'ai la fonction jQuery suivante:

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

result[0] est une valeur que je veux définir comme élément selected dans ma zone de sélection .result[0] est égal à Bruce jones.

la zone de sélection est remplie par une requête de base de données, mais l'un des fichiers HTML rendus est:

<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]); ne remplit pas l'option sélectionnée dans la case de sélection. J'ai aussi essayé $("#salesrep").val(result[0]); sans aucune chance.

Toute aide appréciée.

donc ce que je veux, c’est que l’option sélectionnée/mise en surbrillance dans la liste déroulante des ventes soit Bruce Jones.

HTML pour être:

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

Merci encore,

Script entier 

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

Le rendu HTML est:

<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>
jqueryhtmlselectedhtml-select
27
Smudger

Essaye ça :

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

Il suffit de remplacer option[value="Bruce Jones"] par option[value=result[0]]

Et avant de sélectionner une nouvelle option, vous pouvez vouloir "désélectionner" la précédente: 

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

Vous voudrez peut-être aussi lire ceci: jQuery obtient le texte de balise d'option spécifique

Edit: Utilisation de jQuery Mobile, ce lien peut constituer une bonne solution: jquery mobile - définir les valeurs de sélection/option

46
Jb Drucker

Définissez la valeur à définir comme option sélectionnée dans la liste déroulante:

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

Ici travaille démo

Si cela ne fonctionne toujours pas:

  1. Veuillez vérifier les erreurs JavaScript sur la console.
  2. Assurez-vous d'avoir inclus les fichiers jQuery
  3. votre réseau ne bloque pas le fichier jquery si vous l'utilisez en externe.
  4. Vérifiez votre source de vue une fois la copie exacte de l'élément stop jquery pour fonctionner correctement
27
Zaheer Ahmed

Une chose que je pense que personne n’a mentionnée, et une erreur stupide que j’ai commise par le passé (en particulier lors du remplissage dynamique de sélections) .val () de jQuery ne fonctionnera pas pour une entrée de sélection s'il n'y a pas d'option avec une valeur qui correspond à la valeur fournie.

Voici un violon expliquant -> 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());
3
Jake Zieve

Vous devez remplacer YourID et value = "3" pour vos actuels.

$(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>

et valeur = "3" pour vos actuels.

$('#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>
2
Oscar Fuquen

$(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>

1
Madhuka Dilhan

La correspondance entre .val('Bruce jones') et value="Bruce Jones" est sensible à la casse. On dirait que vous capitalisez Jones dans l'un mais pas dans l'autre. Soit vous cherchez l’origine de la différence, utilisez les identifiants au lieu du nom ou appelez .toLowerCase() pour les deux.

0
Black Mantha