我有以下代码:
<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="" 获取代码？
最佳答案
首先请注意，创建自己的属性将意味着您的 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>关于javascript - 使用 jQuery 采用自定义属性而不是 val()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39830252/