Question

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

这里是我的示例代码：

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 srcipt ----

$(".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表示具有类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＆amp; jquery选择并获取值和属性

2 个答案: