Question

我有以下代码：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select name="size">
    <option custAttr="0" value="0" disabled selected>Value ↓</option>
    <option custAttr="10" value="10">AAA (10)</option>
    <option custAttr="20" value="20">BBB (20)</option>
    <option custAttr="30" value="30">CCC (30)</option>
</select>

<label class="result"></label>

<script>
$(document).ready(function() {
    $('select').on('change', function() {
        $('.result').text(
            $('select[name=size]').val()
        );
    });
});
</script>
</body>
</html>

实际上脚本会从value=""获取内容。脚本是否有一种方法可以从我的自定义属性custAttr=""中获取代码？

Answer 1

首先请注意，创建自己的属性意味着您的HTML无效，可能会产生意外影响。使用data-*属性存储您自己的数据。从那里，您可以使用option:selected来获取所需的数据值。试试这个：

$(document).ready(function() {
  $('select').on('change', function() {
    $('.result').text($('select[name=size] option:selected').data('cust-attr'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="size">
  <option data-cust-attr="0" value="0" disabled selected>Value ↓</option>
  <option data-cust-attr="10" value="10">AAA (10)</option>
  <option data-cust-attr="20" value="20">BBB (20)</option>
  <option data-cust-attr="30" value="30">CCC (30)</option>
</select>

<label class="result"></label>

Answer 2

据我所知你可以这样做

$("#myselect option:selected").attr('custAttr');

Answer 3

$('select[name=size]').attr("custAttr");

.attr()

Answer 4

attr()应该做到这一点！

$('select[name=size]').attr('custAttr');

用jQuery取自定义属性而不是val（）

4 个答案: