Définir l'option de sélection «sélectionné», par valeur

952

J'ai un selectchamp avec quelques options. Maintenant, je dois sélectionner l'un de ceux optionsavec jQuery. Mais comment puis - je faire quand je ne connais que valuede optionqui doit être sélectionné?

J'ai le HTML suivant:

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

Je dois sélectionner l'option avec valeur val2. Comment cela peut-il être fait?

Voici une page de démonstration: http://jsfiddle.net/9Stxb/

w00
la source
Pour la valeur unique du menu déroulant, utilisez .val ('5') pour la sélection multiple, utilisez val (['5', '4', '8']) démo complète freakyjolly.com/…
Code Spy

Réponses:

1537

Il existe un moyen plus simple qui ne vous oblige pas à entrer dans la balise options:

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

Découvrez la méthode this jQuery .

pinghsien422
la source
18
Cela peut provoquer des bogues dans FF (au moins) survenant dans une boîte de sélection vide
Jonathan
21
l'affiche de la question commence par: "J'ai un champ de sélection avec quelques options ..." donc il n'est pas vide, donc la solution reste correcte.
pinghsien422
8
@JamesCazzetta envoyer un tableau à val: .val(["Multiple2", "Multiple3"]). api.jquery.com/val/#val-value
scipilot
133
J'ai dû appeler manuellement .val(x).change();pour déclencher l'événement onChange de la sélection, il semble que la définition de val () ne le déclenche pas.
scipilot
16
Attention: val () peut définir des valeurs qui n'existent pas dans les options.
Daniel
429

Pour sélectionner une option avec la valeur 'val2':

$('.id_100 option[value=val2]').attr('selected','selected');
Kirill Ivlev
la source
5
Il s'agit de la meilleure solution si la valeur souhaitée peut ou non être une option, et que vous ne souhaitez pas apporter de modification si ce n'est pas une option. Si vous utilisez .val()sur la sélection et essayez de choisir une valeur qui n'est pas là, tout désélectionnera.
Wally Altman
D'accord - c'est l'option la plus élégante - claire et précise. Je ne sais pas si "prop" fonctionne mieux dans tous les cas (navigateurs). Mais cela fait certainement la recherche facile pour vous.
Lee Fuller
4
En outre, j'ai utilisé $("select[name=foo] option[value=bar]).attr('selected','selected');ce qui a également bien fonctionné pour tous les navigateurs que j'ai testés.
Lee Fuller
1
J'aime mieux cette réponse que la réponse acceptée, car: element.outerHTML est mis à jour avec cela, contrairement à la réponse acceptée.
HoldOffHunger
2
Il convient de noter que cela ne fonctionnera pas si la liste déroulante de sélection a été masquée, donc dans mon cas, j'utilise le plugin select boxit mais j'essaie de déclencher la modification de la zone de sélection afin que le code original avec le gestionnaire onchange pour la liste déroulante continue de fonctionner. Il suffit de mettre à jour le code du nouvel élément qui est l'élément selectboxit
chris c
331

Utilisez l' change()événement après avoir sélectionné la valeur. De la documentation:

Si le champ perd le focus sans que le contenu ait changé, l'événement n'est pas déclenché. Pour déclencher l'événement manuellement, appliquez .change()sans arguments:

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

Plus d'informations sur .change () .

jitendrapurohit
la source
22
Cela mérite beaucoup plus de votes positifs et appartient au sommet. C'est la bonne façon, pas de tripotage prop, attretc. et progresse correctement tous les événements.
Polygnome
1
Oui, cela propage correctement tous les événements. Lors de mes tests, "attr" a fonctionné la première fois, puis tout est resté "sélectionné". J'ai utilisé "prop" qui a tout changé correctement, mais n'a pas propagé d'événements tels que (afficher / masquer) d'autres champs. Cette réponse a fonctionné dans tous les cas et doit être considérée comme correcte.
iLLin
1
Si vous avez déjà un écouteur à modifier, cela provoquera une boucle infinie.
qwertzman
1
Lutté un moment pour essayer de changer ma valeur stupide de liste déroulante, cette solution était la seule qui fonctionnait! Merci mon pote!
AxleWack
1
Merci. J'ai beaucoup cherché avant de trouver cette suggestion, et c'était la seule chose qui fonctionnait. Je ne sais pas pourquoi ce n'est pas au sommet.
Rob Santoro
58

Désélectionnez tout d'abord et filtrez les options sélectionnables:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)
idiot
la source
2
La valeur de l'attribut sélectionné peut être une chaîne vide ou selected. Tu voulais dire .prop()?
rink.attendant.6
2
Bonne réponse. La réponse acceptée se termine par une sélection vide, lorsque la valeur n'existe pas dans les options.
Rauli Rajande
5
AU HAUT, le meilleur ici. Pour une utilisation future, je pense que nous devrions utiliser prop au lieu de attr.
Daniel
J'aime beaucoup cette solution. Je me demande si ce serait mieux, en termes de performances, si le sélecteur était changé en ".id_100> option"
Hill
43
<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>

Mise en état en attente par valeur

   $('#contribution_status_id').val("2");
Développeur
la source
36

Pour moi, ce qui suit a fait le travail

$("div.id_100").val("val2").change();
Taran
la source
27

Je pense que le moyen le plus simple consiste à sélectionner val (), mais vous pouvez vérifier les éléments suivants. Voir Comment gérer la balise select et option dans jQuery? pour plus de détails sur les options.

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

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

Non optimisé, mais la logique suivante est également utile dans certains cas.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});
Dipu
la source
Je préfère cette méthode à la définition directe de val (). J'aime aussi définir l'attribut - aide au débogage. $ (this) .attr ("sélectionné", "sélectionné")
Craig Jacobs
17

Vous pouvez sélectionner n'importe quel attribut et sa valeur en utilisant le sélecteur d'attribut [attributename=optionalvalue], donc dans votre cas, vous pouvez sélectionner l'option et définir l'attribut sélectionné.

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

valueest la valeur que vous souhaitez sélectionner.

Si vous devez supprimer des valeurs sélectionnées précédemment, comme ce serait le cas si cela est utilisé plusieurs fois, vous devez le modifier légèrement afin de supprimer d'abord l'attribut sélectionné.

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

La meilleure façon est la suivante:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
Daniel Carpio Contreras
la source
Sur Chrome, le paramètre $('<select>').val('asdf')n'a pas mis à jour la sélection pour afficher l'option actuellement sélectionnée. Cette réponse a résolu ce problème.
Joshua Burns
Bien que cela fonctionne aussi, mais $ ('<select>') .val ('asdf') fonctionne bien dans le chrome 79.0.3945.88
QMaster
14

une réponse simple est, à 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>

sur jquery, appelez ci-dessous la fonction par bouton ou autre

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

il est simple et fonctionne à 100%, car il est tiré de mon travail ... :) j'espère que son aide ..

Mang Jojot
la source
Votre valeur par défaut est 1000? Pourquoi pas ""
voodoocode
2
c'est facultatif, vous pouvez le modifier selon vos besoins .. :)
Mang Jojot
14

Il n'y a aucune raison de trop y penser, tout ce que vous faites est d'accéder et de définir une propriété. C'est ça.

D'accord, donc quelques dom de base: si vous faisiez cela en JavaScript, vous le feriez:

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

Mais vous ne le faites pas avec du JavaScript simple, vous le faites avec jQuery. Et dans jQuery, vous voulez utiliser la fonction .prop () pour définir une propriété, alors vous le feriez comme ceci:

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

Quoi qu'il en soit, assurez-vous simplement que votre identifiant est unique. Sinon, vous vous cognerez la tête contre le mur en vous demandant pourquoi cela n'a pas fonctionné.

Yitzhak
la source
12

La façon la plus simple de le faire est:

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');

Sortie: Cela activera ENT .

Pran
la source
12

Il est préférable de l'utiliser change()après avoir défini la valeur de sélection.

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

En faisant cela, le code va fermer de changer de sélection par utilisateur, l'explication est incluse dans JS Fiddle :

JS Fiddle

Nick Tsai
la source
Pourquoi est-ce? Pourriez-vous expliquer un peu?
71GA
JS Fiddle . Avec une méthode change (), le code se terminera par une modification de la sélection par l'utilisateur, alors qu'il y aura des écouteurs en cours de modification à gérer.
Nick Tsai
12

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

Cela fonctionne bien où #graphtypeest l'id de la balise de sélection.

exemple de balise de sélection:

 <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>
LOKENDRA
la source
8
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
Ravi Wadje
la source
8

Utilisation:

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

Cela fonctionne pour moi. J'utilise ce code pour analyser une valeur dans un formulaire de mise à jour de fancybox, et ma source complète depuis app.js est:

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

Et mon code PHP est:

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));
}
Adityo
la source
7

.attr () ne fonctionne parfois pas dans les anciennes versions de jQuery, mais vous pouvez utiliser .prop () :

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

Cela fonctionne à coup sûr pour Select Control :

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

Mettez simplement ce code:

$("#Controls_ID").val(value);
Osama khodrog
la source
4

Lien source entrez la description de l'image ici

Utiliser la méthode jQuery val () pour la sélection de valeurs uniques et multiples dans DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>
Code Spy
la source
3

Essaye ça. JavaScript simple mais efficace + jQuery le combo mortel.

SelectComponent:

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

Sélection:

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

Maintenant, votre option 4 sera sélectionnée. Vous pouvez le faire, pour sélectionner les valeurs au démarrage par défaut.

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

ou créez une fonction simple mettez la ligne dedans et appelez la fonction sur anyEvent pour sélectionner l'option

Un mélange de jQuery + javaScript fait la magie ....

Majid Ali Khan
la source
3

Est un ancien poste, mais voici une fonction simple qui agit comme un plugin jQuery.

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

        return this;
    };

Vous pouvez simplement faire quelque chose comme ceci:

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

Reson pourquoi l'utiliser est parce que vous changez le satemant sélectionné en DOM ce qui est pris en charge par le navigateur croisé et déclenchera également un changement pour que vous puissiez l'attraper.

Est essentiellement une simulation d'action humaine.

Ivijan Stefan Stipić
la source
2
  • Vous devez garder à l'esprit la valeur que vous souhaitez modifier dynamiquement, doit être la même que celle présente dans les options que vous définissez dans votre code HTML tel quel case sensative. Vous pouvez modifier votre zone de sélection dynamiquement comme suit,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

Shahrukh Anwar
la source
1

Il semble y avoir un problème avec les contrôles déroulants de sélection qui ne changent pas dynamiquement lorsque les contrôles sont créés dynamiquement au lieu d'être dans une page HTML statique.

Dans jQuery, cette solution a fonctionné pour moi.

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

Tout comme un addendum, la première ligne de code sans la deuxième ligne fonctionnait en fait de manière transparente, la récupération de l'index sélectionné était correcte après avoir défini l'index et si vous avez réellement cliqué sur le contrôle, il afficherait l'élément correct, mais cela ne reflétait pas dans l'étiquette supérieure du contrôle.

J'espère que cela t'aides.

user2288580
la source
0

Un problème que j'ai rencontré lorsque la valeur est un ID et le texte est un code. Vous ne pouvez pas définir la valeur à l'aide du code, mais vous n'avez pas d'accès direct à l'ID.

var value;

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

//Do work here
Ryan
la source
0

ça marche pour moi

$("#id_100").val("val2");
user9972736
la source
-1

Cela fonctionne bien

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
Mohammed Muzammil
la source