Why does the change event never fire on a select box?

Question

I've 3 list box like this one with a different id and name:

<div class="col-md-4 column"> <div class="form-group"> <input type="hidden" name="identityCardList[0].identityCardId"> <label for="identityCardType1" class="col-sm-3 control-label">Type</label> <div class="col-sm-9"> <select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control"> </select> </div> </div> <div class="form-group"> <label for="idCardValue1" class="col-sm-3 control-label">Valeur</label> <div class="col-sm-9"> <input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur"> </div> </div> <div class="form-group"> <label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label> <div class="col-sm-9"> <div class="input-group date" id="expirationDateCardPicker1"> <input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label> </div> </div> </div> </div> <div class="col-md-4 column"> ... </div> <div class="col-md-4 column"> ... </div>

In the list box, I've this kind of value:

<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control"> <option value=""></option> <option value="1" data-card-expiration="false">Certificat de naissance</option> <option value="2" data-card-expiration="false">N.A.S</option> <option value="3" data-card-expiration="true">N.A.M</option> </select>

When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.

This is my generic attempt:

$("select[id^='identityCardType']").on('change', 'select', function (e){ debugger; if($(e.target).data("data-card-expiration")){ //disabled the nearest component expirationDateCard after this select } });

Why does the change event never occur?

Satpal · Accepted Answer · 2015-07-13 18:58:09Z

You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.

$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select' });

Bhavin Solanki · Accepted Answer · 2015-07-14 11:56:41Z

1

Try this easy code

$("select#identityCardType1").on('change', function (e){ if($(this).data("cardexpiration")){ //disabled the nearest component expirationDateCard after this select } });

edited Jul 14, 2015 at 11:56

answered Jul 13, 2015 at 19:01

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

3 Comments

robert trudel Over a year ago

$(this).data("cardexpiration") is undefined.

Bhavin Solanki Over a year ago

put identityCardType1 instead of identityCardType

robert trudel Over a year ago

gold is to do it a generic way... this work better var select = $(e.target); var selectedOption = select.find("option:selected"); if(selectedOption.data("card-expiration")=="true"){ }

Collectives™ on Stack Overflow

Why does the change event never fire on a select box?

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related