JQuery - comment sélectionner un élément de liste déroulante en fonction de la valeur

Je souhaite que la liste déroulante (sélectionner) soit modifiée en fonction de la valeur des entrées.

j'ai

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

Et je sais que je veux changer la liste déroulante pour que l'option avec la valeur "fg" soit sélectionnée. Comment puis-je faire cela avec JQuery?

Tu devrais utiliser

$('#dropdownid').val('selectedvalue');

Voici un exemple:

$('#dropdownid').val('selectedvalue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

$('#yourdropddownid').val('fg');

En option,

$('select>option:eq(3)').attr('selected', true);

où 3est l'index de l'option souhaitée.

Démo en direct

$('#mySelect').val('fg');...........

Vous pouvez utiliser ce code jQuery que je trouve facile à utiliser:

$('#your_id [value=3]').attr('selected', 'true');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>

 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

Vous pouvez simplement utiliser:

$('#select_id').val('fg')

Dans votre cas $("#mySelect").val("fg"):)

Il est peut-être trop tard pour répondre, mais au moins quelqu'un obtiendra de l'aide.

Vous pouvez essayer deux options:

C'est le résultat lorsque vous souhaitez attribuer en fonction de la valeur d'index, où «0» est l'index.

 $('#mySelect').prop('selectedIndex', 0);

n'utilisez pas «attr» car il est obsolète avec la dernière jquery.

Lorsque vous souhaitez sélectionner en fonction de la valeur de l'option, choisissez ceci:

 $('#mySelect').val('fg');

où 'fg' est la valeur de l'option

Ce code a fonctionné pour moi:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

Avec cette liste de sélection HTML:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>

J'ai une situation différente, où les valeurs de la liste déroulante sont déjà codées en dur. Il n'y a que 12 districts, donc le contrôle d'interface utilisateur de jQuery Autocomplete n'est pas rempli de code.

La solution est bien plus simple. Parce que je devais parcourir d'autres messages où il était supposé que le contrôle était chargé dynamiquement, je ne trouvais pas ce dont j'avais besoin et je l'ai finalement compris.

Donc, là où vous avez HTML comme ci-dessous, la définition de l'index sélectionné est définie comme ceci, notez la partie -input, qui est en plus de l'ID déroulant:

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

Quelque chose d'autre a compris à propos du contrôle de saisie semi-automatique est de savoir comment le désactiver / le vider correctement. Nous avons 3 contrôles fonctionnant ensemble, dont 2 s'excluent mutuellement:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

Certains de ces éléments dépassent la portée du message et je ne sais pas où le mettre exactement. Comme cela est très utile et a pris du temps à comprendre, il est partagé.

Und Also ... pour activer un contrôle comme celui-ci, c'est (désactivé, faux) et NON (activé, vrai) - cela a également pris un peu de temps à comprendre. :)

La seule autre chose à noter, en plus du message, est:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

Tous partagés parce qu'il a fallu trop de temps pour apprendre ces choses à la volée. J'espère que c'est utile.

$ ('select # myselect option [value = "ab"]').

Vous pouvez sélectionner la valeur de l'option de liste déroulante par nom

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});