jQuery obtiene el valor de select onChange


779

Tenía la impresión de que podría obtener el valor de una entrada de selección haciendo esto $(this).val();y aplicando el onchangeparámetro al campo de selección.

Parece que solo funciona si hago referencia a la ID.

¿Cómo lo hago usando esto?

Respuestas:


1492

Prueba esto-

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

También puede hacer referencia con onchange event-

function getval(sel)
{
    alert(sel.value);
}
<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>


15
Sé que esto es bastante tarde, pero si está utilizando el teclado (tabulación) para navegar por un formulario y utiliza las flechas arriba / abajo para elegir de una lista desplegable, FireFox (22.0) no activa el evento de cambio. Además, debe vincular la pulsación de teclas para FireFox. Información adicional: jQuery 1.10.2 usando la sintaxis $ ('select'). On ('change', function () {/ * do seomthing * /});
MonkeyZeus

Mhh para mí, el ejemplo de jQuery no funciona, y estoy seguro de que tengo el archivo 1.11 jQuery cargado correctamente en mi página. En los registros JS de mi navegador, obtuve esto: no tiene ningún método 'activado'. Lo probé tanto en Firefox como en Chrome, el mismo resultado. ¿Es un uso estándar o se implementó solo en las versiones más nuevas de jquery? Gracias por la respuesta
Alex

2
@MonkeyZeus No es necesario, se activará cuando el componente pierda el foco. De (método de cambio jQuery) [ api.jquery.com/change/] "Para cuadros de selección, casillas de verificación y botones de opción, el evento se activa inmediatamente cuando el usuario realiza una selección con el mouse, pero para el otro elemento escribe el evento se difiere hasta que el elemento pierde el foco ". Y, por supuesto, puedes usar un .change()atajo en su lugar.
PhoneixS

@Alex estás haciendo algo mal, había sido desde jQuery 1.7, visita api.jquery.com/on .
PhoneixS

1
@PhoneixS ¿Sigues usando FireFox 22.0?
MonkeyZeus

103

Tenía la impresión de que podría obtener el valor de una entrada seleccionada haciendo esto $ (this) .val ();

Esto funciona si se suscribe discretamente (que es el enfoque recomendado):

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

Si usa onselecty combina el marcado con el script, debe pasar una referencia al elemento actual:

onselect="foo(this);"

y entonces:

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

99

Esto me ayudó.

Para seleccionar:

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

Para radio / casilla de verificación:

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

Puse '#' en mi código $ ('# select_tags'). On ('change', function ()
Daleman

16

Pruebe el método de delegación de eventos, esto funciona en casi todos los casos.

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

10

Puedes probar esto (usando 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>

O puede usar Javascript simple como este:

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>


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>

9

La función de flecha tiene un alcance diferente que la función, this.valuedará indefinido para una función de flecha. Para arreglar el uso

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

6

Esto es lo que funcionó para mí. Probé todo lo demás sin suerte:

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

Tomado de Mozilla


6

Busque el sitio 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." );
});

Ejemplo de jQuery:

Para agregar una prueba de validez a todos los elementos de entrada de texto:

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

6

Para todas las selecciones, invoque esta función.

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

Para un solo seleccione:

$('#select_id') 

4

jQuery obtiene el valor de seleccionar elementos html usando el evento Change

Para demostración y más ejemplos

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


3

Tenga en cuenta que si esto no funciona, podría deberse a que el DOM no se ha cargado y su elemento aún no se ha encontrado.

Para solucionarlo, coloque el script al final del cuerpo o use el documento listo

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

2
jQuery(document).ready(function(){

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

    });
})

2

Permítanme compartir un ejemplo que desarrollé con BS4, thymeleaf y Spring boot.

Estoy usando dos SELECT, donde el segundo ("subtema") se llena con una llamada AJAX basada en la selección del primero ("tema").

Primero, el fragmento de hoja de tomillo:

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

Estoy iterando sobre una lista de temas que se almacena en el contexto del modelo, mostrando todos los grupos con sus temas, y luego todos los temas que no tienen un grupo. BaseIdentity es una clave compuesta @Embedded BTW.

Ahora, aquí está el jQuery que maneja los cambios:

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

La llamada inicial de change () asegura que se ejecutará en la recarga de la página o si un valor ha sido preseleccionado por alguna inicialización en el back-end.

Por cierto: estoy usando la validación de formulario "manual" (ver "es válido" / "no es válido"), porque a mí (y a los usuarios) no me gustó que BS4 marque los campos vacíos no obligatorios como verdes. Pero ese es un gran alcance de esta Q y, si está interesado, también puedo publicarlo.


1

Quiero agregar, quién necesita una funcionalidad completa de encabezado personalizado

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

    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.