在选择更改时，使用jQuery获取选择的值

Question

I have this HTML:

<div class="modal-body">
    <div class="form-group">
        <label class="col-sm-3">Élément à facturer</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <select class="form-control" name="BIL_Item_Id">
                    <option value="">Sélectionner un élément</option>
                    <option value="" data-item-rate="" data-item-taxes="7" data-item-taxes-sum="0" data-item-type="Night">Nuitée</option>
                    <option value="17" data-item-rate="21.00" data-item-taxes="8,7" data-item-taxes-sum="0" data-item-type="Item">Petit-Déjeuner</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3">Quantité</label>
        <div class="col-sm-9">
            <div class="col-sm-12">
                <select class="form-control" name="BIL_Item_Quantity">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </div>
        </div>
    </div>
</div>

On change in the selects (BIL_Item_Id and BIL_Item_Quantity), I would like to get some info from the first select.

So I'm using this script:

$('select[name="BIL_Item_Quantity"], select[name="BIL_Item_Id"]').on('change', function() {
    var parent = $(this).closest('div.modal-body');

    // Get datas
    var quantity = parent.find('select[name="BIL_Item_Quantity"]:selected').val();
    var rate = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]:selected').data('item-rate')).toFixed(2);

    alert(quantity);
    alert(rate);
});

But it doesn't work.

Do you know why ?

Thanks.

Answer 1

Please check below updated code for selecting data:

var quantity = parent.find('select[name="BIL_Item_Quantity"]').val();
    var rate = Number.parseFloat(parent.find('select[name="BIL_Item_Id"]').find(":selected").data('item-rate')).toFixed(2);

jsFiddle

Answer 2

Here is an answer using jquery whenever you change a select field the value from the first select elements selected option is logged to console.

  $("#selectOne , #selectTwo").change(function() { var text = $('#selectOne').find(":selected").text(); console.log(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-body"> <div class="form-group"> <label class="col-sm-3">Élément à facturer</label> <div class="col-sm-9"> <div class="col-sm-12"> <select class="form-control" id="selectOne" name="BIL_Item_Id"> <option value="2">Sélectionner un élément</option> <option value="2" data-item-rate="" data-item-taxes="7" data-item-taxes-sum="0" data-item-type="Night">Nuitée</option> <option value="17" data-item-rate="21.00" data-item-taxes="8,7" data-item-taxes-sum="0" data-item-type="Item">Petit-Déjeuner</option> </select> </div> </div> </div> <div class="form-group"> <label class="col-sm-3">Quantité</label> <div class="col-sm-9"> <div class="col-sm-12"> <select class="form-control" id="selectTwo" name="BIL_Item_Quantity"> <option value="1">1</option> <option value="2">2</option> </select> </div> </div> </div> </div>