Question

我在选择下拉列表的更改时有一个选择的地址下拉列表我需要获取选项属性并将它们粘贴到输入字段中。这是我到目前为止所尝试的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代码

<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框的本地selectedIndex属性和{{1收集：

options

例如：(updated fiddle)

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

Answer 2

试试..

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<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 3

你有一些拼写错误：

$（this）在更改活动中不是$（this）.find（＆＃39;：selected＆＃39;）
.data（＆＃39;地址＆＃39;）可用于attr（＆＃39;数据地址＆＃39;）
同一事件处理程序中的事件处理程序是无用的
尽可能缓存所选元素

我的建议是：

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

<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>

＆＃13;

Answer 4

这就是你需要的。

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

Answer 5

您还可以使用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')); 
                })        
    });

Answer 6

为什么在Change事件函数中添加了两个，请删除第二个。试试这个..

＆＃13;

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

＆＃13;

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

6 个答案: