如何获取选择下拉列表更改的属性值 [英] How to get attributes values on change of select dropdown

问题描述

我在选择下拉列表中选择地址下拉菜单我需要获取选项属性并将它们粘贴到输入字段中。
这是我到目前为止所尝试的 TryFiddle

I have a select dropdown of addresses on change of select dropdown I need to get option attributes and paste them in input fields. Here is what I tried so far TryFiddle

当我选择任何选项时，我希望将选项data-attr粘贴到各自的输入框中，我拥有数据属性作为数据地址，数据城市，数据邮编和数据国家/地区;

I have data attributes as data-address, data-city, data-zipcode and data-country for each option, when I select any option I want that options data-attr to be pasted in respective input boxes;

这是我的代码

$(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代码

Html code

<div id="collapseOne" class="panel-collapse collapse in">
            <form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
            <div class="form-group">
                    <select name="" class="form-control" id="saved_billing_addresses">
                        <option value="">Select Address</option>
                        <option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
                         <option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
                          <option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
                    </select>
                </div>
            <div class="form-group">
                    <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
                </div>
                <div class="form-group" style="width:150px;float:left;">
                    <button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
                </div>
            </form>
        </div>
    </div>

我不知道怎么回事，请提供任何建议

I dont know whats going wrong it should work, please provide any suggestions

推荐答案

这是jQuery为您做的不多的地方之一，您最好的选择是使用 select 框的本地 selectedIndex 属性和选项集合：

This is one of the rare places where jQuery doesn't do much for you, your best bet is to use the select box's native selectedIndex property and options collection:

// 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'));
        }
    })
});

这篇关于如何获取选择下拉列表更改的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！