Question

我这样的3个列表框就像这个具有不同ID和名称的列表框：

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

在列表框中，我有这样的价值：

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

当我在列表框中选择一个值时，我想读取数据卡到期值并根据需要禁用到期输入文本。

这是我的一般尝试：

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

为什么改变事件永远不会发生？

Answer 1

您无需将选择器'select'传递给.on()，只需删除它即可。选择器过滤元素的后代。

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

Answer 2

试试这个简单的代码

$("select#identityCardType1").on('change',  function (e){

    if($(this).data("cardexpiration")){
        //disabled the nearest component expirationDateCard after this select
    }
});

为什么更改事件永远不会在选择框上触发？

2 个答案: