如何在 jquery 中获取选定的选项 ID

Question

我正在寻找打印 ID 的方法，或者让我 select 从 select

中的选项中获取 ID

这里是我的代码：

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

<script src="https://ajax.googleapis.com/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>

Answer 1

使用change事件代替点击event，这里使用:selected选择器

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

Answer 2

怎么样

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

此外，由于它是一个 select 元素，因此将事件更改为 .change() 而不是 .click() 是明智的。

Answer 3

您可以使用上下文 this 到 select child，即 selected，并获取其 ID 属性。

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

Answer 4

我在 fiddle 中准备了这个示例，希望对您有用 https://jsfiddle.net/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'));
       }

    });
 })

Answer 5

请检查plunk

使它适用于您的示例的主要代码是：

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

我认为这解决了您想要实现的目标。如果您需要任何改进，请告诉我:)

如何在 jquery 中获取选定的选项 ID

how to get the selected option id in jquery

javascript

jquery

select

html-select