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?

jquery select

— RIK
fuente

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>

Expandir fragmento

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>

Expandir fragmento

— thecodeparadox
fuente

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
}

— Darin Dimitrov
fuente

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

— ilgam
fuente

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

— Krishna
fuente

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>

Expandir fragmento

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>

Expandir fragmento

— Abrar Jahin
fuente

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
fuente

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

— Sharuk Ahmed
fuente

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

— drjorgepolanco
fuente

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

— Andre Mesquita
fuente

6

Para todas las selecciones, invoque esta función.

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

Para un solo seleccione:

$('#select_id')

— Ali Asad
fuente

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>

Expandir fragmento

— Desarrollador
fuente

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

— Colin D
fuente

2

jQuery(document).ready(function(){

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

    });
})

— Virendra Yaduvanshi
fuente

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.

— 4 células cerebrales
fuente

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

    }

— Hamit YILDIRIM
fuente