JQuery - Auswahl eines Dropdown-Elements basierend auf dem Wert

85

Ich möchte, dass ein Dropdown-Menü (Auswahl) basierend auf dem Wert der Einträge geändert wird.

ich habe

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

Und ich weiß, dass ich das Dropdown-Menü so ändern möchte, dass die Option mit dem Wert "fg" ausgewählt ist. Wie kann ich das mit JQuery machen?

javascript  jquery  select  jquery-selectors 
— Mark W.
quelle
Ich fand es so einfach, schien aber nicht zu funktionieren. Ich denke, es ist Debugging-Zeit.
— Mark W
1
— Christopher
1
Ihr Titel ist etwas irreführend. Sie wählen kein Dropdown aus, Sie wählen eine Option in einem Dropdown aus. Deshalb gibt es 7 Antworten, die mir überhaupt nicht helfen ...
— user1566694
@ user1566694 Wenn Sie technische Informationen erhalten möchten, wird dies nicht als Dropdown bezeichnet, sondern als "Auswahl"
— Mark W

Antworten:

149

Du solltest benutzen

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

Hier ein Beispiel:

$('#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>
Erweitern Sie das Snippet

— Jeaf Gilbert
quelle
20
Einverstanden mit oben. Nach Ihrem Code wäre es$('#mySelect option[value="fg"]').attr('selected', true)
— Martavis P.
Mein Fehler. Ich habe gesehen, dass es in einigen Fällen nicht funktioniert, aber es funktioniert eindeutig in der Geige.
— Martavis P.
2
Ich würde nur vorsichtig damit sein. Das Ereignis 'change' für das Tag <select> wird nicht ausgelöst. Wenn Sie dieses Ereignis nicht verwenden, ist dies in Ordnung.
— Chad Fisher
2
@ChadFisher Wenn Sie das Änderungsereignis verwenden, lösen Sie es mit$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
In der Tat hilft die Triggeränderung, wenn Sie einen Folgecode geschrieben haben, um bestimmte Aktionen wie die Modellaktualisierung auszuführen. Auch die ASP.net-Ansichtsmodellaktualisierungen finden beim Änderungsereignis der DD statt. +1
— Div Tiwari
23 
$('#yourdropddownid').val('fg');

Optional

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

Wo 3ist der Index der gewünschten Option?

Live-Demo

— xbonez
quelle
8

Sie können diesen jQuery-Code verwenden, den ich für einfacher halte:

$('#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>
Erweitern Sie das Snippet

— Himmel
quelle
5

Sie können einfach verwenden: 

$('#select_id').val('fg')
— Dagang
quelle
5 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Abdo-Host
quelle
1
oder $ ('# mySelect'). val ('ab'). trigger ("change") ;; falls Sie das select2 Plugin verwenden.
— Vaibhav Jain
1
.change () hat mir geholfen, mein ASP.net MVC-Modellattribut zu aktualisieren. Danke für die Antwort.
— Div Tiwari
2

Vielleicht ist es zu spät, um zu antworten, aber zumindest jemand wird Hilfe bekommen.

Sie können zwei Optionen ausprobieren:

Dies ist das Ergebnis, wenn Sie basierend auf dem Indexwert zuweisen möchten, wobei '0' Index ist.

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

Verwenden Sie 'attr' nicht, da es mit der neuesten jquery veraltet ist.

Wenn Sie basierend auf dem Optionswert auswählen möchten, wählen Sie Folgendes:

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

Dabei ist 'fg' der Optionswert

— Manjuboyz
quelle
Eine indexbasierte Auswahl wird selten verwendet, ist jedoch eine gute Option, da Sie einen generischen Code zum Festlegen der Dropdown-Listen geschrieben haben und die Werte je nach DD variieren. Vielen Dank :).
— Div Tiwari
1 

$('#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>
Erweitern Sie das Snippet

— Siddhartha
quelle
0

Ich habe eine andere Situation, in der die Dropdown-Listenwerte bereits fest codiert sind. Es gibt nur 12 Distrikte, sodass das Steuerelement für die automatische Vervollständigung der jQuery-Benutzeroberfläche nicht mit Code gefüllt ist.

Die Lösung ist viel einfacher. Weil ich durch andere Posts waten musste, in denen angenommen wurde, dass das Steuerelement dynamisch geladen wurde, nicht fand, was ich brauchte, und es schließlich herausfand.

Wenn Sie also HTML wie folgt haben, wird das Festlegen des ausgewählten Index wie folgt festgelegt. Beachten Sie den Teil -input, der zusätzlich zur Dropdown-ID angezeigt wird: 

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

Etwas anderes, das über das Autocomplete-Steuerelement herausgefunden wurde, ist das ordnungsgemäße Deaktivieren / Leeren. Wir haben 3 Steuerelemente, von denen sich 2 gegenseitig ausschließen:

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

Einiges davon geht über den Rahmen des Beitrags hinaus und ich weiß nicht, wo ich es genau platzieren soll. Da dies sehr hilfreich ist und einige Zeit in Anspruch genommen hat, wird es geteilt.

Und auch ... um ein Steuerelement wie dieses zu aktivieren, ist es (deaktiviert, falsch) und NICHT (aktiviert, wahr) - das hat auch ein bisschen Zeit gekostet, um es herauszufinden. :) :)

Das einzige andere, was Sie zusätzlich zum Beitrag beachten sollten, ist:

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

Alle teilten sich, weil es zu lange dauerte, diese Dinge im laufenden Betrieb zu lernen. Hoffe das ist hilfreich.

— user1585204
quelle
Sie sind hier weit vom Thema entfernt. Die Frage ist eine einfache Änderung einer Auswahl basierend auf ihrem Wert mit JQuery. Es sind keine UI-Elemente beteiligt.
— Mark W
0

Sie können den Wert der Dropdown-Option nach Namen auswählen 

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

});
— Hardik
quelle
0

Dieser Code hat bei mir funktioniert:

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

Mit dieser HTML-Auswahlliste:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— Nole
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.