[英]get id of selected option of datalist object by using data-value
[英]How to get data-value of selected option on select change in jquery
我的 html 语法如下
<select id="category" name="category">
<option value="0">Please Select</option>
<option value="50" data-value="akne">ACNE</option>
<option value="11" data-value="rednessbumps">Redness / Bumps</option>
<option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
<option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
<option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>
$("#category").change(function () {
var selectedItem = $(this).val();
var abc=$(this).attr("data-value");
});
在这里,我无法在 jquery 中获取data-value
,我应该如何获取?
采用
var abc = $('option:selected',this).data("value");
尝试
$("#category").change(function() { var selectedItem = $(this).val(); var abc = $('option:selected',this).data("value"); alert(abc); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="category" name="category"> <option value="0">Please Select</option> <option value="50" data-value="akne">ACNE</option> <option value="11" data-value="rednessbumps">Redness / Bumps</option> <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option> <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option> <option value="17" data-value="dry-sensitive">Dry Sensitive</option> </select>
jQuery 有一个内置的data
来做你想做的事:
var abc = $(this).data('value')
但是,您必须首先找到所选选项,然后获取其值。
$("#category").change(function () { var selectedItem = $(this).val(); var abc=$(this).find(':selected').data("value"); console.log(abc) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <select id="category" name="category"> <option value="0">Please Select</option> <option value="50" data-value="akne">ACNE</option> <option value="11" data-value="rednessbumps">Redness / Bumps</option> <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option> <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option> <option value="17" data-value="dry-sensitive">Dry Sensitive</option> </select>
this
指的是没有任何data-value
属性的#category
。 您应该在其中找到选定的选项。
$(this).find(":selected").attr("data-value");
// Or
$(":selected", this).attr("data-value");
$("#category").change(function () { var abc = $(":selected", this).data("value"); console.log(abc); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="category" name="category"> <option value="0">Please Select</option> <option value="50" data-value="akne">ACNE</option> <option value="11" data-value="rednessbumps">Redness / Bumps</option> <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option> <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option> <option value="17" data-value="dry-sensitive">Dry Sensitive</option> </select>
$(document).ready(function(){ $("#category").change(function () { var selectedItem = $(this).val(); var abc= $('option:selected', this).attr('data-value'); console.log(abc,selectedItem); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <select id="category" name="category"> <option value="0">Please Select</option> <option value="50" data-value="akne">ACNE</option> <option value="11" data-value="rednessbumps">Redness / Bumps</option> <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option> <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option> <option value="17" data-value="dry-sensitive">Dry Sensitive</option> </select>
使用$('option:selected', this).attr('data-value');
或$('option:selected', this).data('value');
从所选option
访问属性
这是 HTML
<select class="form-control" type="text" onchange="set_bank_branches(this)" id="payment_bank_name" name="payment_bank_name" value="">
<option value=""></option>
<option value="ADB" data-min="16" data-max="16">AGRICULTURAL DEVELOPMENT BANK</option>
<option value="ACC" data-min="13" data-max="13">ACCESS BANK</option>
<option value="BOA" data-min="11" data-max="11">BANK OF AFRICA</option>
</select>
这是获取选项数据的 Javascript 函数
function set_bank_branches(x)
{
// This is where I get the data on the option selected
var minlength= $(x).find(":selected").attr("data-min");
var maxlength= $(x).find(":selected").attr("data-min");
alert("maxlength: " + maxlength + " -- minlength: " + minlength);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.