j查询提取<选项>字段中自定义属性的值

Question

好的，例如，我在选择中声明了一个自定义值

<select id="something">
<option value="1" data="01"></option>
<option value="2" data="02"></option>
<option value="3" data="03"></option>
<option value="4" data="04"></option>
</select>

由于某种原因，我不能在这里使用value属性。我需要使用data属性来提取值。我尝试使用jquery，如下所示：

var dataString = {
clicks: $("#clicks").val($(this).find(':selected').attr('data'))
};

但这并没有按预期返回结果。在控制台中，其显示too much recursion。我在这里没有得到data属性的值(01、02、03 等)。请帮忙。

Answer 1

我建议您使用data-*前缀属性，该属性可以使用.data()

console.log($("#something option:selected").data("value"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01"></option>
<option value="2" data-value="02"></option>
<option value="3" data-value="03"></option>
<option value="4" data-value="04"></option>
</select>

Answer 2

试试这段代码

<select id="selectNo">
<option value="1" data-no="01">1</option>
<option value="2" data-no="02">2</option>
<option value="3" data-no="03">3</option>
<option value="4" data-no="04">4</option>
</select>

和Jquery查询

$("#selectNo").change(function () {
alert($(this).find(':selected').data("no"));
});

输出

Answer 3

我认为this是你的下拉菜单。请尝试以下操作：

$("#clicks").val($(this).find('option:selected').attr('data'));

Answer 4

$('#something').change(function(e)	{
//var id = $(this).val();
$('#something :selected').each(function(){
var value = $(this).data('id');

alert(value); 
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-id="01"></option>
<option value="2" data-id="02"></option>
<option value="3" data-id="03"></option>
<option value="4" data-id="04"></option>
</select>

Answer 5

尝试像下面这样使用。

var option = $("#something option:selected").attr("data-value");

经验：

$("#something").change(function () {
console.log($("#something option:selected").attr("data-value")) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="something">
<option value="1" data-value="01">01</option>
<option value="2" data-value="02">02</option>
<option value="3" data-value="03">03</option>
<option value="4" data-value="04">04</option>
</select>