JQuery - Auswahl eines Dropdown-Elements basierend auf dem Wert

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?

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>

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

Optional

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

Wo 3ist der Index der gewünschten Option?

Live-Demo

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

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>

Sie können einfach verwenden:

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

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

 // or

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

In deinem Fall $("#mySelect").val("fg"):)

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

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.

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

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

});

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>