Hoe selecteert u een bepaalde optie in een Select-element in jQuery?

Als u de index, waarde of tekst kent. Ook als u geen ID hebt voor een directe referentie.

dit , dit en Deze zijn allemaal Nuttige antwoorden.

Voorbeeldmarkering

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

1, Autoriteit 100%

een selector om het middelste optie-element op waarde te krijgen, is

$('.selDiv option[value="SEL1"]')

Voor een index:

$('.selDiv option:eq(1)')

Voor een bekende tekst:

$('.selDiv option:contains("Selection 1")')

Edit : Zoals hierboven opmerkingen is, kan de OP zijn geweest na het wijzigen van het geselecteerde item van de vervolgkeuzelijst. In versie 1.6 en hoger wordt de methode voor prop () aanbevolen:

$('.selDiv option:eq(1)').prop('selected', true)

In oudere versies:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: na de opmerking van Ryan. Een overeenkomst op “Selectie 10” kan ongewenst zijn. Ik heb geen selectorgevonden die overeenkomt met de volledige tekst, maar een filterwerkt:

$('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Wees voorzichtig met $(e).text()omdat het een nieuwe regel kan bevatten waardoor de vergelijking mislukt. Dit gebeurt wanneer de opties impliciet zijn gesloten (geen </option>-tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

Als je gewoon e.textgebruikt, wordt elke extra witruimte, zoals de nieuwe regel achteraan, verwijderd, waardoor de vergelijking robuuster wordt.


Antwoord 2, autoriteit 11%

Geen van de bovenstaande methoden bood de oplossing die ik nodig had, dus ik dacht dat ik zou bieden wat voor mij werkte.

$('#element option[value="no"]').attr("selected", "selected");

Antwoord 3, autoriteit 7%

Je kunt gewoon de val()methode gebruiken:

$('select').val('the_value');

Antwoord 4, autoriteit 5%

In waarde, wat voor mij werkte met jQuery 1.7was de onderstaande code, probeer dit:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

5

  $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

6

U kunt de Selecteer de Selecteer en gebruiken dit:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

Het zou de gewenste optie moeten selecteren.


7

Precies het zal werken, probeer dit hieronder methoden

Voor normale geselecteerde optie

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

Voor Selecteer 2 Optie Trigger Optie Moet

gebruiken

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

8

jQuery-2.1.4 , ik vond het volgende antwoord op werk voor mij:

$('#MySelectionBox').val(123).change();

Als u een stringwaarde hebt, probeer dan het volgende:

$('#MySelectionBox').val("extra thing").change();

Andere voorbeelden werkten niet voor mij, dus daarom voeg ik dit antwoord toe.

Ik heb het originele antwoord gevonden op:
https://forum.jQuery.com/topic / HOW-To-Dynamisch-Select-optie-in-DropDown-Menu


9

Voor instelling Selecteer Waarde met Geselecteerde triggering:

$('select.opts').val('SEL1').change();

Voor instellingsoptie van een scope:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

Deze code gebruikt de selector om het select-object met de voorwaarde te achterhalen en wijzig vervolgens het geselecteerde attribuut met attr().


Verder raad ik aan om de gebeurtenis change()toe te voegen na het instellen van het attribuut op selected, door dit te doen zal de code sluiten om de selectie per gebruiker te wijzigen.


Antwoord 10

Mijn eigen vraag beantwoorden voor documentatie. Ik weet zeker dat er andere manieren zijn om dit te bereiken, maar dit werkt en deze code is getest.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;
            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");
    }); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

Antwoord 11

Ik gebruik dit als ik de index van de lijst ken.

$("#yourlist :nth(1)").prop("selected","selected").change();

Hierdoor kan de lijst worden gewijzigd en wordt de wijzigingsgebeurtenis geactiveerd.
De “:nth(n)” telt vanaf index 0


Antwoord 12

Probeer dit

u gebruikt gewoon select field id in plaats van #id (dwz.#select_name)

gebruik in plaats van optiewaardeuw geselecteerde optie waarde

<script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

Antwoord 13

ik ga mee:-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

Antwoord 14

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

Antwoord 15

Voor JQuery gekozen als u het attribuut naar Function stuurt en de optie update-selecteert

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

Antwoord 16

De $('select').val('the_value');lijkt de juiste oplossing en als je datatabelrijen hebt, dan:

$row.find('#component').val('All');

Antwoord 17

als u jQuery niet wilt gebruiken, kunt u onderstaande code gebruiken:

document.getElementById("mySelect").selectedIndex = "2";

Antwoord 18

Bedankt voor de vraag. Ik hoop dat dit stukje code voor u zal werken.

var val = $("select.opts:visible option:selected ").val();

Antwoord 19

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

of

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Antwoord 20

Er zijn een paar suggesties waarom je propzou moeten gebruiken in plaats van attr.Gebruik zeker propaangezien ik beide en attrgeeft je rare resultaten, behalve in de eenvoudigste gevallen.

Ik wilde een oplossing waarbij het selecteren van een willekeurig gegroepeerde select-opties automatisch een andere select-invoer op dezelfde pagina selecteerde. Dus bijvoorbeeld als u 2 vervolgkeuzelijsten heeft – een voor landen en de andere voor continenten. In dit scenario selecteerde het selecteren van een land automatisch het continent van dat land in de vervolgkeuzelijst van het andere continent.

Other episodes