Comment obtenir les valeurs des attributs lors du changement de la liste déroulante de sélection

Sudarshan Kalebere

J'ai une liste déroulante d'adresses lors du changement de liste déroulante de sélection J'ai besoin d'obtenir des attributs d'option et de les coller dans les champs de saisie. Voici ce que j'ai essayé jusqu'à présent TryFiddle

J'ai des attributs de données comme adresse de données, ville de données, code postal de données et pays de données pour chaque option, lorsque je sélectionne une option, je veux que les options data-attr soient collées dans les boîtes de saisie respectives;

voici mon code 

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

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

Je ne sais pas ce qui ne va pas, cela devrait fonctionner, veuillez fournir des suggestions

TJ Crowder

C'est l'un des rares endroits où jQuery ne fait pas grand-chose pour vous, votre meilleur pari est d'utiliser la propriété et la collection selectnatives de la boîte :selectedIndexoptions

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

Par exemple: (violon mis à jour)

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

Articles connexes