Selecteer optie ‘geselecteerd’ instellen, op waarde

Ik heb een selectveld met enkele opties erin. Nu moet ik een van die optionsselecteren met jQuery. Maar hoe kan ik dat doen als ik alleen de valueweet van de optiondie moet worden geselecteerd?

Ik heb de volgende HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Ik moet de optie met waarde val2selecteren. Hoe kan dit worden gedaan?

Hier is een demopagina:
http://jsfiddle.net/9Stxb/


Antwoord 1, autoriteit 100%

Er is een eenvoudigere manier waarbij u niet naar de optie-tag hoeft te gaan:

$("div.id_100 select").val("val2");

Bekijk deze jQuery-methode.

OPMERKING: de bovenstaande code activeert de wijzigingsgebeurtenis niet.
Je moet het zo noemen voor volledige compatibiliteit:

$("div.id_100 select").val("val2").change();

Antwoord 2, autoriteit 28%

Om een optie met waarde ‘val2’ te selecteren:

$('.id_100 option[value=val2]').attr('selected','selected');

Antwoord 3, autoriteit 23%

Gebruik de gebeurtenis change()na het selecteren van de waarde. Uit de documenten:

Als het veld de focus verliest zonder dat de inhoud is gewijzigd, wordt de gebeurtenis niet geactiveerd. Om de gebeurtenis handmatig te activeren, pas .change()toe zonder argumenten:

$("#select_id").val("val2").change();

Meer informatie is te vinden op .change().


Antwoord 4, autoriteit 3%

Deselecteer eerst alles en filter de selecteerbare opties:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

Antwoord 5, autoriteit 3%

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Instellen op status in behandeling op waarde

  $('#contribution_status_id').val("2");

Antwoord 6, autoriteit 2%

Voor mij deed het volgende zijn werk

$("div.id_100").val("val2").change();

Antwoord 7, autoriteit 2%

Ik denk dat de gemakkelijkste manier is om val() in te stellen, maar je kunt het volgende controleren. Zie Hoe te handelen select en option tag in jQuery?voor meer details over opties.

$('div.id_100  option[value="val2"]').prop("selected", true);
$('id_100').val('val2');

Niet geoptimaliseerd, maar de volgende logica is in sommige gevallen ook nuttig.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Antwoord 8

De beste manier is als volgt:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

Antwoord 9

een eenvoudig antwoord is:
bij html

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

op jQuery, roep onderstaande functie aan met een knop of wat dan ook

$('#idUkuran').val(11).change();

het is eenvoudig en 100% werkt, want het is overgenomen van mijn werk… 🙂
hoop dat het helpt..


Antwoord 10

Je kunt op elk attribuut en zijn waarde selecteren door de attributenselector [attributename=optionalvalue]te gebruiken, dus in jouw geval kun je de optie selecteren en het geselecteerde attribuut instellen.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Waarbij valuede waarde is waarmee u wilt selecteren.

Als u eerder geselecteerde waarden moet verwijderen, zoals het geval zou zijn als dit meerdere keren wordt gebruikt, moet u dit enigszins wijzigen om eerst het geselecteerde kenmerk te verwijderen

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

Antwoord 11

Er is geen reden om hier over na te denken, het enige wat u doet is toegang krijgen tot een eigenschap en deze instellen. Dat is het.

Ok, dus wat basisdom:
Als je dit in gewoon JavaScript zou doen, zou je dit doen:

window.document.getElementById('my_stuff').selectedIndex = 4;

Maar je doet het niet met gewoon JavaScript, je doet het met jQuery. En in jQuery wil je de functie .prop() gebruiken om een eigenschap in te stellen, dus je zou het als volgt doen:

$("#my_stuff").prop('selectedIndex', 4);

Zorg er in ieder geval voor dat uw ID uniek is. Anders stoot je je hoofd tegen de muur en vraag je je af waarom dit niet werkte.


Antwoord 12

De gemakkelijkste manier om dat te doen is:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Uitvoer: dit activeert ENT.


Antwoord 13

U kunt dit op verschillende manieren bereiken:
(onthoud dat als een element moet worden bediend, het beter een id of klasse is, in plaats van het bovenliggende element een id of klasse te geven).
Hier,
Omdat de div een klasse heeft om de select erin te targeten, is de code:

$("div.id_100 select").val("val2");

of

$('div.id_100  option[value="val2"]').prop("selected", true);

Als de klas zou zijn gegeven om zichzelf te selecteren, is de code:

$(".id_100").val("val2");

of

$('.id_100 option[value=val2]').attr('selected','selected');

of

$('.id_100 option')
    .removeAttr('selected')
    .filter('[value=val1]')
    .attr('selected', true);

Om de waarde dynamisch door te geven, is de code:
valu=”val2″;

$("div.id_100 select").val(valu);
$("div.id_100 > select > option[value=" + valu + "]").prop("selected",true);

Als element wordt toegevoegd via ajax,
Je moet ‘id’ aan je element geven en
. gebruiken
window.document.getElementById
anders
Je zult ‘klasse’ moeten geven aan je element en gebruik
venster.document.getelementByID

U kunt ook de waarde van Select-element selecteren door IT’s indexnummer.
Als u ID hebt gegeven aan uw Select-element, is de code:

window.document.getElementById('select_element').selectedIndex = 4;

Vergeet niet wanneer u de selecteerwaarde als hierboven genoemd wijzigt, wordt de methode van de wijziging niet genoemd.
d.w.z. Als u een code hebt geschreven om wat spul te doen, zullen de bovenstaande methoden de selecteerwaarde wijzigen, maar de verandering niet activeert.
Om de verandering-functie te activeren, moet je aan het einde toevoegen. Change () aan het einde.
Dus de code is:

$("#select_id").val("val2").change();

Antwoord 14

Het is beter om change()te gebruiken na het instellen Selecteer waarde.

$("div.id_100 select").val("val2").change();

Door dit te doen, sluit de code in de buurt van het wijzigen van Selecteren door de gebruiker, de uitleg is inbegrepen in JS Fiddle :

JS Fiddle


Antwoord 15

$('#graphtype option[value=""]').prop("selected", true);

Dit werkt goed, waar #graphtypeis de ID van de SELECT-tag.

Voorbeeld Selecteer Tag:

<select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

Antwoord 16

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

Antwoord 17

Gebruik:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Dit werkt voor mij. Ik gebruik deze code voor het ontleden van een waarde in een fancybox-updateformulier en mijn volledige bron van app.js is:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();
    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);
            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

En mijn PHP-code is:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

Antwoord 18

.attr() werkt soms niet in oudere jQuery-versies, maar u kunt .prop()gebruiken:

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

Antwoord 19

Dit werkt zeker voor Select Control:

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

Antwoord 20

het werkt voor mij

$("#id_100").val("val2");

Antwoord 21

Probeer dit eens.
Eenvoudig maar effectief javaScript + jQuery de dodelijke combinatie.

Selecteer Component:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Selectie :

document.getElementById("YourSelectComponentID").value = 4;

Nu wordt uw optie 4 geselecteerd. U kunt dit doen om standaard de waarden bij het opstarten te selecteren.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

of maak een eenvoudige functie, plaats de regel erin en roep de functie op anyEvent aan om de optie te selecteren

Een combinatie van jQuery + javaScript doet de magie….


Antwoord 22

Is een oud bericht, maar hier is een eenvoudige functie die werkt als een jQuery-plug-in.

   $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');
        return this;
    };

Je kunt eenvoudig zoiets als dit doen:

$('.id_100').selectOption('val2');

De reden waarom u dit gebruikt, is omdat u de geselecteerde satemant verandert in DOM wat door crossbrowser wordt ondersteund en ook een wijziging zal veroorzaken zodat u deze kunt opvangen.

Is eigenlijk menselijke actiesimulatie.


Antwoord 23

Er zijn hier veel oplossingen om de geselecteerde waarde te wijzigen, maar geen van hen werkte voor mij omdat mijn uitdaging enigszins anders was dan het OP. Ik heb een behoefte om een ​​ander te filteren Selecteer Drop Down op basis van deze waarde.

De meeste mensen gebruikten $("div.id_100").val("val2").change();om het voor hen te laten werken. Ik moest dit enigszins aanpassen aan $("div#idOfDiv select").val("val2").trigger("change").

Dit was ook niet helemaal genoeg, ik moest er ook voor zorgen dat ik wachtte op het document om te laden. Mijn volledige code ziet er als volgt uit:

$(document).ready(function() {
    $("div#idOfDiv select").val("val2").trigger("change");
});

Ik hoop dat dit helpt iemand met dezelfde uitdaging die ik had!


Antwoord 24

Er lijkt een probleem te zijn met Select Down-Down-bedieningselementen die niet dynamisch veranderen wanneer de bedieningselementen dynamisch worden gemaakt in plaats van op een statische HTML-pagina.

In jQuery werkte deze oplossing voor mij.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Net als een addendum De eerste regel van de code zonder de tweede regel, werkte daadwerkelijk in die zin in dat, het ophalen van de geselecteerde index is correct na het instellen van de index en als u daadwerkelijk op de besturing klikte, zou het het juiste item tonen, maar dit didde niet weerspiegelen in het bovenste label van de besturing.

Ik hoop dat dit helpt.


Antwoord 25

Er kwam een ​​probleem waar ik tegen liep toen de waarde een ID is en de tekst is een code. U kunt de waarde niet instellen met behulp van de code, maar u hebt geen directe toegang tot de ID.

var value;
$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});
//Do work here

Antwoord 26

Ik moest een optie selecteren, maar het was mogelijk voor twee opties om dezelfde waarde te hebben.
Dit was puur voor visuele (front-end) verschil.
U kunt een optie selecteren (zelfs als 2 dezelfde waarde hebben) zoals SO:

let options = $('#id_100 option')
options.prop('selected', false)   // Deselect all currently selected ones
let option = $(options[0])        // Select option from the list
option.prop('selected', true)
option.parent().change()          // Find the <select> element and call the change() event.

Dit deselecteert alle momenteel geselecteerde <option>elementen. Selecteert de eerste (met options[0]) en werkt de <select>-element met behulp van de changeEvenement.

Other episodes