我有选择下拉列表的选择下拉地址我需要获取选项属性并将它们粘贴到输入字段中。 这是我到目前为止尝试过的TryFiddle
我有数据属性作为每个选项的数据地址，数据城市，数据邮政编码和数据国家，当我选择任何选项时，我希望将选项data-attr粘贴到相应的输入框中;
这是我的代码
$(document).ready(function(){ $('#saved_billing_addresses').on("change",function(){ alert('change'); $("#bill_address").val($(this).attr('data-address')); $("#bill_city").val($(this).attr('data-city')); $("#bill_zipcode").val($(this).attr('data-zipcode')); $("#bill_country").val($(this).attr('data-country')); }) }) Html代码
我不知道它出错应该有效，请提供任何建议
这是jQuery对你没有多大帮助的罕见地方之一，你最好的选择是使用select box的native selectedIndex属性和options集合：
// Get the selected HTMLOptionElement var opt = this.options[this.selectedIndex];
例如:( 更新小提琴）
$(document).ready(function() { $('#saved_billing_addresses').on("change", function() { var opt = this.options[this.selectedIndex]; if (opt) { opt = $(opt); $("#bill_address").val(opt.attr('data-address')); $("#bill_city").val(opt.attr('data-city')); $("#bill_zipcode").val(opt.attr('data-zipcode')); $("#bill_country").val(opt.attr('data-country')); } }) });
试试吧..
$(document).ready(function(){ $('#saved_billing_addresses').on("change",function(){ $("#bill_address").val($('option:selected', this).data('address')); $("#bill_city").val($('option:selected', this).data('city')); $("#bill_zipcode").val($('option:selected', this).data('zipcode')); $("#bill_country").val($('option:selected', this).data('country')); }) });
.hide-it{ display:none; }
你有一些错别字：
我的建议是：
$(function () { $('#saved_billing_addresses').on("change", function(e){ var jqSelectedOption = $(this).find(':selected'); $("#bill_address").val(jqSelectedOption.data('address')); $("#bill_city").val(jqSelectedOption.data('city')); $("#bill_zipcode").val(jqSelectedOption.data('zipcode')); $("#bill_country").val(jqSelectedOption.data('country')); }); });
这就是你需要的。
$('#saved_billing_addresses').on("change",function(event){ const $this = this.options[this.selectedIndex]; $("#bill_address").val($this.getAttribute('data-address')); $("#bill_city").val($this.getAttribute('data-city')); $("#bill_zipcode").val($this.getAttribute('data-zipcode')); $("#bill_country").val($this.getAttribute('data-country')); });
您还可以使用find来获取数据属性
$(document).ready(function(){ $('#saved_billing_addresses').on("change",function(){ $("#bill_address").val($(this).find(':selected').data('address')); $("#bill_city").val($(this).find(':selected').data('city')); $("#bill_zipcode").val($(this).find(':selected').data('zipcode')); $("#bill_country").val($(this).find(':selected').data('country')); }) });
为什么在Change事件函数中添加了两个，请删除第二个。 试试这个..
$(document).ready(function(){ $('#saved_billing_addresses').on("change",function(){ $("#bill_address").val($(this).find('option:selected').attr('data-address')); $("#bill_city").val($(this).find('option:selected').attr('data-city')); $("#bill_zipcode").val($(this).find('option:selected').attr('data-zipcode')); $("#bill_country").val($(this).find('option:selected').attr('data-country')); }) });