javascript - 如何在选择下拉列表更改时获取属性值

Question

在更改选择下拉列表时，我有一个地址选择下拉列表，我需要获取选项属性并将它们粘贴到输入字段中。这是我到目前为止尝试过的 TryFiddle

我有每个选项的数据属性，如数据地址、数据城市、数据邮政编码和数据国家，当我选择任何选项时，我希望将选项数据属性粘贴到相应的输入框中；

这是我的代码

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

<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>

我不知道出了什么问题，应该可以，请提供任何建议

Answer 1

这是 jQuery 不能为您做太多事情的罕见地方之一，您最好的选择是使用 select 框的 native selectedIndex 属性和 选项 集合:

// Get the selected HTMLOptionElement
var opt = this.options[this.selectedIndex];

例如:(updated fiddle)

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