it-swarm.com.de

JQuery - Auswahl des Dropdown-Elements nach Wert

Ich möchte eine Dropdown-Liste (Auswahl) festlegen, die 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 die Dropdown-Liste so ändern möchte, dass die Option mit dem Wert "fg" ausgewählt wird. Wie kann ich das mit JQuery machen?

73
Mark W

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

Optional,

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

dabei ist 3 der Index der gewünschten Option.

Live Demo

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

Sie können diesen jQuery-Code verwenden, der für mich einfacher zu verwenden ist:

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

Sie können einfach verwenden: 

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

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

2
Kamran Ahmed

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

Sie können zwei Optionen ausprobieren:

Dies ist das Ergebnis, wenn Sie basierend auf dem Indexwert zuweisen möchten, wobei "0" für Index steht.

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

verwenden Sie nicht 'attr', da es mit der neuesten Jquery nicht mehr verwendet wird.

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

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

dabei ist 'fg' der Optionswert

1
Manjuboyz

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

0
MythBank

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

Die Lösung ist viel einfacher. Weil ich andere Posts durchgehen musste, in denen davon ausgegangen wurde, dass die Kontrolle dynamisch geladen wurde, nicht das fand, was ich brauchte, und schließlich herausfand, was ich brauchte.

Wenn Sie HTML wie unten eingestellt haben, wird der gewählte Index wie folgt festgelegt: Beachten Sie den -input-Teil, der sich zusätzlich zur Dropdown-ID befindet: 

$('#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 über das Autocomplete-Steuerelement ist das richtige Deaktivieren/Leeren. Wir haben drei Steuerelemente, von denen sich zwei 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
    }
});

Ein Teil davon liegt außerhalb des Postens und ich weiß nicht, wo ich es genau platzieren soll. Da dies sehr hilfreich ist und einige Zeit in Anspruch nahm, wird es geteilt.

Und auch ... Um ein Steuerelement wie dieses zu aktivieren, ist es (deaktiviert, falsch) und NICHT (aktiviert, wahr). Das hat auch etwas gedauert. :) 

Die einzige andere Sache, die zusätzlich zu dem Beitrag zu beachten ist, 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.

0
user1585204

Sie können den Dropdown-Optionswert nach Namen auswählen 

jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }
});
0
Hardik
$('#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>
0
Siddhartha