javascript & jquery 选择并获取值和属性

Question

请帮助我 select 并获取我的选项的值及其属性。

这里是我的示例代码：

html----

<div class="cart">
    <select class="a">
        <option value="1" prodID="12354">1</option>
        <option value="2" prodID="11364">2</option>
        <option value="3" prodID="16352">3</option>
    </select>
</div>

jq 脚本----

$(".cart").on('change load', '.a select', function(){
    alert(//the value);
    alert(//the value of attribure prodID);
})

预计弹出：

if 1 is selected
    alert 1(value) and 12354(attr)

if 3 is selected alert 3 and 16352

Answer 1

您只需要使用更改事件：

$(".cart select").on('change', function(){
  alert(this.value);
  alert($(this).find('option:selected').attr('prodID'));
});

Working Demo

prodID 不是有效属性。但是我建议您使用自定义属性作为 data-prodID。

 <select class="a">
  <option value="1" data-prodID="12354">1</option>
  <option value="2" data-prodID="11364">2</option>
  <option value="3" data-prodID="16352">3</option>
 </select>

然后使用以下方法获取自定义选项值：

 $(this).find('option:selected').data('prodID');

Answer 2

将您的选择器更正为 select.a。 .a select 表示具有 class a 和子 select
您只需要更改事件。
使用:selected选择器获取当前选择的选项，attr()获取prodID属性

$(".cart").on('change', 'select.a', function() {
  console.log($(this).val());
  console.log($(':selected').attr('data-prod-id'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="cart">
  <select class="a">
    <option value="1" data-prod-id="12354">1</option>
    <option value="2" data-prod-id="11364">2</option>
    <option value="3" data-prod-id="16352">3</option>
  </select>
</div>

javascript & jquery 选择并获取值和属性

javascript & jquery selection and get value and attribute

javascript

jquery

events

jquery-selectors