web-dev-qa-db-fra.com

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

Je veux définir un menu déroulant (sélectionner) pour être modifié 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 le menu déroulant pour que l'option avec la valeur "fg" soit sélectionnée. Comment puis-je faire cela avec JQuery?

javascriptjqueryselectjquery-selectors
73
Mark W

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>
128
Jeaf Gilbert
$('#yourdropddownid').val('fg');

En option,

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

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

Démo en direct

21
xbonez
$('#mySelect').val('fg');...........
15
Royi Namir

Vous pouvez utiliser ce code jQuery que je trouve plus 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>

7
Sky

Vous pouvez simplement utiliser: 

$('#select_id').val('fg')
5
Dagang
$('#mySelect').val('ab').change();
4
Abdo-Host

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

2
Kamran Ahmed

Peut-être qu'il est trop tard pour répondre, mais au moins quelqu'un va chercher de l'aide.

Vous pouvez essayer deux options:

Ceci est le résultat lorsque vous souhaitez affecter en fonction de la valeur d'index, où '0' est Index.

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

n'utilisez pas 'attr' car il est déconseillé avec la dernière version de 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

1
Manjuboyz

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

0
MythBank

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 et le contrôle de l'interface utilisateur de jQuery Autocomplete n'est pas rempli par le code.

La solution est beaucoup plus facile. Parce que je devais parcourir d'autres postes où il était supposé que le contrôle était chargé de façon dynamique, je ne trouvais pas ce dont j'avais besoin, puis je le trouvais finalement.

Donc, là où vous avez HTML comme ci-dessous, la définition de l'index sélectionné est la suivante: notez la partie -input, qui s'ajoute à 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>

Une autre chose à propos du contrôle de saisie semi-automatique est de savoir comment le désactiver/le vider correctement. Nous avons 3 contrôles qui travaillent ensemble, 2 d'entre eux mutuellement exclusifs:

//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
    }
});

Une partie de cela dépasse le cadre du post et je ne sais pas où le mettre exactement. Comme cela est très utile et qu’il nous a fallu du temps pour le comprendre, il est partagé.

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

La seule autre chose à noter, bien 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.

0
user1585204

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

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