jQuery obtient la valeur de select onChange

779

J'avais l'impression que je pouvais obtenir la valeur d'une entrée de sélection en faisant cela $(this).val();et en appliquant le onchangeparamètre au champ de sélection.

Il semblerait que cela ne fonctionne que si je fais référence à l'ID.

Comment puis-je le faire en utilisant cela.

jquery select

— RIK
source

1493

Essaye ça-

$('select').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Développer l'extrait

Vous pouvez également référencer avec onchange event-

function getval(sel)
{
    alert(sel.value);
}

<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Développer l'extrait

— thecodeparadox
source

15

Je sais que c'est assez tard mais si vous utilisez le clavier (tabulation) pour naviguer dans un formulaire et utilisez les flèches haut / bas pour choisir dans une liste déroulante, FireFox (22.0) ne déclenche pas l'événement de changement. Vous devez également lier la touche Keypress pour FireFox. Informations supplémentaires: jQuery 1.10.2 utilisant la syntaxe $ ('select'). On ('change', function () {/ * do seomthing * /});

— MonkeyZeus

Mhh pour moi, l'exemple jQuery ne fonctionne pas, et je suis sûr que le fichier jQuery 1.11 est correctement chargé dans ma page. Dans les journaux JS de mon navigateur, j'ai obtenu ceci: n'a pas de méthode 'on'. Je l'ai essayé à la fois sur Firefox et Chrome, même résultat. Est-ce une utilisation standard ou a-t-il été implémenté uniquement dans les nouvelles versions de jquery? merci pour la réponse

— Alex

2

@MonkeyZeus Vous n'avez pas besoin, il se déclenchera lorsque le composant perdra le focus. From (jQuery change method) [ api.jquery.com/change/] "Pour les cases de sélection, les cases à cocher et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur fait une sélection avec la souris, mais pour les autres types d'éléments, l'événement est différé jusqu'à ce que l'élément perd le focus. " Et bien sûr, vous pouvez utiliser un .change()raccourci à la place.

— PhoneixS

@Alex vous faites quelque chose de mal, c'était depuis jQuery 1.7 voir api.jquery.com/on .

— PhoneixS

1

@PhoneixS Utilisez-vous toujours FireFox 22.0?

— MonkeyZeus

103

J'avais l'impression que je pouvais obtenir la valeur d'une entrée de sélection en faisant ceci $ (this) .val ();

Cela fonctionne si vous vous abonnez discrètement (ce qui est l'approche recommandée):

$('#id_of_field').change(function() {
    // $(this).val() will work here
});

si vous utilisez onselectet mélangez le balisage avec le script, vous devez passer une référence à l'élément actuel:

onselect="foo(this);"

et alors:

function foo(element) {
    // $(element).val() will give you what you are looking for
}

— Darin Dimitrov
source

99

Cela m'a aidé.

Pour sélectionner:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Pour radio / case à cocher:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

— ilgam
source

J'ai mis '#' dans mon code $ ('# select_tags'). On ('change', function ()

— Daleman

16

Essayez la méthode de délégation d'événement, cela fonctionne dans presque tous les cas.

$(document.body).on('change',"#selectID",function (e) {
   //doStuff
   var optVal= $("#selectID option:selected").val();
});

— Krishna
source

10

Vous pouvez essayer ceci (en utilisant jQuery ) -

$('select').on('change', function()
{
    alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Développer l'extrait

Ou vous pouvez utiliser un simple Javascript comme celui-ci-

function getNewVal(item)
{
    alert(item.value);
}

<select onchange="getNewVal(this);">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Développer l'extrait

— Abrar Jahin
source

10

$('#select_id').on('change', function()
{
    alert(this.value); //or alert($(this).val());
});



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="select_id">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

— Ankit Pise
source

9

La fonction flèche a une portée différente de celle de la fonction, this.valuedonnera indéfini pour une fonction flèche. Pour corriger l'utilisation

$('select').on('change',(event) => {
     alert( event.target.value );
 });

— Sharuk Ahmed
source

6

C'est ce qui a fonctionné pour moi. J'ai essayé tout le reste sans succès:

<html>

  <head>
    <title>Example: Change event on a select</title>

    <script type="text/javascript">

      function changeEventHandler(event) {
        alert('You like ' + event.target.value + ' ice cream.');
      }

    </script>

  </head>

  <body>
    <label>Choose an ice cream flavor: </label>
    <select size="1" onchange="changeEventHandler(event);">
      <option>chocolate</option>
      <option>strawberry</option>
      <option>vanilla</option>
    </select>
  </body>

</html>

Extrait de Mozilla

— drjorgepolanco
source

6

Recherchez le site jQuery

HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

JAVASCRIPT:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

Exemple de jQuery:

Pour ajouter un test de validité à tous les éléments de saisie de texte:

$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});

— Andre Mesquita
source

6

Pour toutes les sélections, appelez cette fonction.

$('select').on('change', function()
{
    alert( this.value );
});

Pour un seul choix:

$('#select_id')

— Ali Asad
source

4

jQuery obtient la valeur des éléments html sélectionnés à l'aide de l'événement on Change

Pour la démonstration et plus d'exemples

$(document).ready(function () {   
    $('body').on('change','#select_box', function() {
         $('#show_only').val(this.value);
    });
});

<!DOCTYPE html>  
<html>  
<title>jQuery Select OnChnage Method</title>
<head> 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
</head>  
<body>  
<select id="select_box">
 <option value="">Select One</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</select>
<br><br>  
<input type="text" id="show_only" disabled="">
</body>  
</html>

Développer l'extrait

— Développeur
source

3

Notez que si ceux-ci ne fonctionnent pas, cela peut être dû au fait que le DOM n'a pas été chargé et que votre élément n'a pas encore été trouvé.

Pour corriger, mettez le script à la fin du corps ou utilisez le document prêt

$.ready(function() {
    $("select").on('change', function(ret) {  
         console.log(ret.target.value)
    }
})

— Colin D
source

2

jQuery(document).ready(function(){

    jQuery("#id").change(function() {
      var value = jQuery(this).children(":selected").attr("value");
     alert(value);

    });
})

— Virendra Yaduvanshi
source

2

Permettez-moi de partager un exemple que j'ai développé avec BS4, thymeleaf et Spring boot.

J'utilise deux SELECT, où le second ("sous-sujet") est rempli par un appel AJAX basé sur la sélection du premier ("sujet").

Tout d'abord, l'extrait de feuille de thym:

 <div class="form-group">
     <label th:for="topicId" th:text="#{label.topic}">Topic</label>
     <select class="custom-select"
             th:id="topicId" th:name="topicId"
             th:field="*{topicId}"
             th:errorclass="is-invalid" required>
         <option value="" selected
                 th:text="#{option.select}">Select
         </option>
         <optgroup th:each="topicGroup : ${topicGroups}"
                   th:label="${topicGroup}">
             <option th:each="topicItem : ${topics}"
                     th:if="${topicGroup == topicItem.grp} "
                     th:value="${{topicItem.baseIdentity.id}}"
                     th:text="${topicItem.name}"
                     th:selected="${{topicItem.baseIdentity.id==topicId}}">
             </option>
         </optgroup>
         <option th:each="topicIter : ${topics}"
                 th:if="${topicIter.grp == ''} "
                 th:value="${{topicIter.baseIdentity.id}}"
                 th:text="${topicIter.name}"
                 th:selected="${{topicIter.baseIdentity?.id==topicId}}">
         </option>
     </select>
     <small id="topicHelp" class="form-text text-muted"
            th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->

<div class="form-group">
    <label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
    <select class="custom-select"
            id="subtopicsId" name="subtopicsId"
            th:field="*{subtopicsId}"
            th:errorclass="is-invalid" multiple="multiple">
        <option value="" disabled
                th:text="#{option.multiple.optional}">Select
        </option>
        <option th:each="subtopicsIter : ${subtopicsList}"
                th:value="${{subtopicsIter.baseIdentity.id}}"
                th:text="${subtopicsIter.name}">
        </option>
    </select>
    <small id="subtopicsHelp" class="form-text text-muted"
           th:unless="${#fields.hasErrors('subtopicsId')}"
           th:text="#{label.subtopics.tt}">select</small>
    <small id="subtopicsIdError" class="invalid-feedback"
           th:if="${#fields.hasErrors('subtopicsId')}"
           th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->

J'itère sur une liste de sujets qui est stockée dans le contexte du modèle, montrant tous les groupes avec leurs sujets, puis tous les sujets qui n'ont pas de groupe. BaseIdentity est une clé composite @Embedded BTW.

Maintenant, voici le jQuery qui gère les modifications:

$('#topicId').change(function () {
    selectedOption = $(this).val();
    if (selectedOption === "") {
        $('#subtopicsId').prop('disabled', 'disabled').val('');
        $("#subtopicsId option").slice(1).remove(); // keep first
    } else {
        $('#subtopicsId').prop('disabled', false)
        var orig = $(location).attr('origin');
        var url = orig + "/getsubtopics/" + selectedOption;
        $.ajax({
            url: url,
           success: function (response) {
                  var len = response.length;
                    $("#subtopicsId option[value!='']").remove(); // keep first 
                    for (var i = 0; i < len; i++) {
                        var id = response[i]['baseIdentity']['id'];
                        var name = response[i]['name'];
                        $("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
                    }
                },
                error: function (e) {
                    console.log("ERROR : ", e);
                }
        });
    }
}).change(); // and call it once defined

L'appel initial de change () garantit qu'il sera exécuté lors du rechargement de la page ou si une valeur a été présélectionnée par une initialisation dans le backend.

BTW: J'utilise la validation de formulaire «manuelle» (voir «est valide» / «n'est pas valide»), car moi (et les utilisateurs) n'aimais pas que BS4 marque les champs vides non requis comme verts. Mais c'est au-delà de la portée de ce Q et si vous êtes intéressé, je peux également le poster.

— 4braincells
source

1

Je veux ajouter, qui a besoin d'une fonctionnalité d'en-tête personnalisée complète

   function addSearchControls(json) {
        $("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
        $("#tblCalls thead tr:eq(1) th").each(function (index) {
            // For text inputs
            if (index != 1 && index != 2) {
                $(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
                var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
                searchControl.on("keyup", function () {
                    table.column(index).search(searchControl.val()).draw();
                })
            }
            // For DatePicker inputs
            else if (index == 1) {
                $(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');

                $('.tblCalls-search-date').on('keyup click change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    table.columns(index).search(v).draw();
                });

                $(".datepicker").datepicker({
                    dateFormat: "dd-mm-yy",
                    altFieldTimeOnly: false,
                    altFormat: "yy-mm-dd",
                    altTimeFormat: "h:m",
                    altField: "#tarih-db",
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
                    firstDay: 1,
                    dateFormat: "yy-mm-dd",
                    showOn: "button",
                    showAnim: 'slideDown',
                    showButtonPanel: true,
                    autoSize: true,
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: false,
                    buttonText: "Tarih Seçiniz",
                    closeText: "Temizle"
                });
                $(document).on("click", ".ui-datepicker-close", function () {
                    $('.datepicker').val("");
                    table.columns(5).search("").draw();
                });
            }
            // For DropDown inputs
            else if (index == 2) {
                $(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">&gt;=</option><option value="lt">&lt;=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');

                var selectedOperator;
                $('#filter_comparator').on('change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    selectedOperator = v;
                    if(v=="select")
                        table.columns(index).search('select|0').draw();
                    $('#filter_value').val("");
                });

                $('#filter_value').on('keyup click change', function () {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        var i = $(this).attr('id');  // getting column index
                        var v = $(this).val();  // getting search input value
                        table.columns(index).search(selectedOperator + '|' + v).draw();
                    }
                });
            }
        })

    }

— Hamit YILDIRIM
source