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

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/

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 .

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

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

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 () .

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

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

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

Pour moi, ce qui suit a fait le travail

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

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

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

Où 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);

La meilleure façon est la suivante:

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

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

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

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 .

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

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

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

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

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

Cela fonctionne à coup sûr pour Select Control :

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

Mettez simplement ce code:

$("#Controls_ID").val(value);

Lien source

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>

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

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.

• 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

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.

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

ça marche pour moi

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

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