I'm looking for some way to print the ID, or let me select the ID from an option in a select

here my code:

$(document).ready(function() {
  $("#direcciones-envio-usuario").click(function() {
    alert(this.id);
  });
})

<script src=".1.1/jquery.min.js"></script>
<select class="selectpicker show-tick" id="direcciones-envio-usuario" data-width="85%" data-header="Eligir dirección">
  <option>Mi casa</option>
  <option>Casa de pepe</option>
  <option data-divider="true"></option>
  <option data-icon="glyphicon-plus-sign" id="nueva_direccion_btn">Nueva dirección</option>
</select>

I'm looking for some way to print the ID, or let me select the ID from an option in a select

here my code:

$(document).ready(function() {
  $("#direcciones-envio-usuario").click(function() {
    alert(this.id);
  });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker show-tick" id="direcciones-envio-usuario" data-width="85%" data-header="Eligir dirección">
  <option>Mi casa</option>
  <option>Casa de pepe</option>
  <option data-divider="true"></option>
  <option data-icon="glyphicon-plus-sign" id="nueva_direccion_btn">Nueva dirección</option>
</select>

• javascript
• jquery
• select
• html-select

Share Improve this question Follow edited Jun 26, 2015 at 21:06 Barmar 784k5757 gold badges548548 silver badges659659 bronze badges asked Jun 26, 2015 at 20:44 ccdiego5ccdiego5 66611 gold badge77 silver badges1616 bronze badges 1

• 1 Most of your options don't have an ID, what should it show for them? Why don't you use this.value instead? – Barmar Commented Jun 26, 2015 at 21:08

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Use change event instead of click event, here use :selected selector

$("#direcciones-envio-usuario").change(function(){
     alert($(':selected', this).attr('id'));
});

I prepared this example in a fiddle, i hope will be useful https://jsfiddle/jgonzalez315/8znq29g7/

     $(document).ready(function(){
         $("#direcciones-envio-usuario").change(function(){
         alert($( "#direcciones-envio-usuario option:selected" ).text()); 
          if($( "#direcciones-envio-usuario option:selected" ).text()=="Nueva dirección")
      {
        //IF YOU WANT attr id
        alert($( "#direcciones-envio-usuario option:selected" ).attr('id'));
       }

    });
 })      

Please check the plunk

The main code to get this to work for your example is:

$(document).ready(function(){
  $("#direcciones-envio-usuario").change(function(){
    alert($(this).children("option:selected").attr("id"));
  });
})   

I think this solves what you were tring to achieve. Let me know if you need any refinements :)

How about

$("#direcciones-envio-usuario").change(function(){
    alert($(this).children(":selected").attr("id"));
});

Also, since it is a select element it would be wise to change your event to .change() instead of .click().

You can use the contextual this to select the child, which is selected, and get its ID attribute.

$("#direcciones-envio-usuario").change(function(){
     alert($(this).find(":selected").attr("id"));
});