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

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'));
});

工作演示

prodID不是有效的属性。 但是我建议您使用custom属性作为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

1. 更正您的选择器进行select.a 。 。 a select表示具有类a和子select的元素
2. 您只需要更改事件。
3. 使用: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>