Home > jQuery, Mini-tips, Programación, Web > Obtener valor(option) de elemento select al cambiar – jQuery

Obtener valor(option) de elemento select al cambiar – jQuery

HTML de ejemplo

 <select id="mySelect">
    <option value="1">option A</option>
    <option value="2">option B</option>
</select>
<br/>
<span id="iSelected">Hola</span>
 

jQuery para conseguir el option recien seleccionado:

 
$('#mySelect').change(function(){
    var $selectedOption = $(this).find('option:selected');
    var selectedLabel = $selectedOption.text();
    var selectedValue = $selectedOption.val();
    $('#iSelected').text(selectedValue + ' - ' + selectedLabel);
});

JsFiddle con el ejemplo

  1. artemisaix
    October 30, 2012 at 13:59

    No me funciona….

    • November 16, 2012 at 13:32

      Puedes postear tu código en http://jsfiddle.net y comenta aquí el link, y te digo que puede estar pasando. Saludos.

      • artemisaix
        December 11, 2012 at 14:00

        Hola, no veo en donde colocar el codigo PHP en esa pagina que me indicas:/

      • artemisaix
        December 11, 2012 at 14:13

        Bueno coloque solo el html con el js aqui esta el link
        http://jsfiddle.net/artemisaix/ZrbNQ/

  2. Fidel Rodríguez Hernández
    May 7, 2013 at 10:32

    Perfecto, me funciono, solo tuve que eliminar el simbolo $ de la variable selectedOption.

    Gracias, por el aporte…

    • luis
      October 25, 2013 at 16:13

      me puedes ayudar con mi codigo de ejemplo porfavor,

      $(‘#mySelect’).change(function(){
      var selectedOption = $(this).find(‘option:selected’);
      var selectedLabel = (selectedOption).text();
      var selectedValue = (selectedOption).val();
      $(‘#iSelected’).text(selectedValue + ‘ – ‘ + selectedLabel);
      }).change();

      option A
      option B

      Hola
      </body

  3. pepe
    July 29, 2013 at 09:32

    Hola, muchas gracias por el codigo, sencillo, rapido y entendible
    salu2

  4. luis
    October 25, 2013 at 16:10

    no me resulta, me podrian ayudar porfavor ?
    dejo el codigo donde lo estoy probando:

    $(‘#mySelect’).change(function(){
    var selectedOption = $(this).find(‘option:selected’);
    var selectedLabel = (selectedOption).text();
    var selectedValue = (selectedOption).val();
    $(‘#iSelected’).text(selectedValue + ‘ – ‘ + selectedLabel);
    }).change();

    option A
    option B

    • luis
      October 25, 2013 at 16:10

      $(‘#mySelect’).change(function(){
      var selectedOption = $(this).find(‘option:selected’);
      var selectedLabel = (selectedOption).text();
      var selectedValue = (selectedOption).val();
      $(‘#iSelected’).text(selectedValue + ‘ – ‘ + selectedLabel);
      }).change();

      option A
      option B

      Hola
      </body

  5. luis
    October 25, 2013 at 16:11

    $(‘#mySelect’).change(function(){
    var selectedOption = $(this).find(‘option:selected’);
    var selectedLabel = (selectedOption).text();
    var selectedValue = (selectedOption).val();
    $(‘#iSelected’).text(selectedValue + ‘ – ‘ + selectedLabel);
    }).change();

    option A
    option B

    Hola
    </body

    • November 7, 2013 at 22:10

      $(‘#mySelect’).change(function(){
      var selectedOption = $(this).find(‘option:selected’);
      var selectedLabel = $(selectedOption).text();
      var selectedValue = $(selectedOption).val();
      $(‘#iSelected’).text(selectedValue + ‘ – ‘ + selectedLabel);
      }).change();

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: