在選擇變化與jQuery

Question

更新最近輸入我有這樣的HTML代碼： https://jsfiddle.net/wjkh6hb7/1/

當我改變選擇的選項應該更新最近的輸入，但實際上並非如此。

我認爲這是因爲選擇名稱RAT_Rates[]，因爲我需要得到結果作爲數組。

任何人都可以解釋我如何改變這種情況？

這裏的JS代碼：

$("select[name='RAT_Rates[]']").on('change', function() { 
    var selected = $(this).find('option:selected'); 

    var name = selected.attr('data-name'); 
    var description = selected.attr('data-description'); 
    var rate = selected.attr('data-rate'); 

    if(rate!='') { 
     $(this).closest("tr").find("input[name='BIL_Rate[]']").val(rate).prop('readonly', true); 
    } 
    else { 
     $(this).closest("tr").find("input[name='BIL_Rate[]']").val('').prop('readonly', false); 
    } 
}); 

感謝。

Answer 1

它不起作用，因爲選擇器不存在。

var s = $("select[name='RAT_Rates[]']").length; 
console.log(s); // 0 

嘗試使用選擇的下拉列表：

$("select[name='BIL_RateId[]']") 

小提琴：背後它不工作但─

1.you調用非存在選擇select[name='RAT_Rates[]']

Answer 2

原因。 2.select名兩者相同。應當明顯的兩個名字屬性好practise.like BIL_RateId，"BIL_Rate[]和BIL_RateId1，"BIL_Rate1[]

工作示例小提琴：

Fiddle

HTML：

<table class="table table-striped table-bordered"> 
    <tbody> 
     <tr> 
      <th width="60%">Date</th> 
      <th width="40%">Rate</th> 
     </tr> 
     <tr> 
      <th> 
       Today<br> 
       <select name="BIL_RateId[]" class="form-control"> 
        <option value="" data-name="" data-description="" data-rate="" selected="">Tarif personnalisé</option> 
        <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option> 
       </select> 
      </th> 
      <td> 
       <div class="col-sm-12"> 
        <input type="text" name="BIL_Rate[]" class="form-control" required=""> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <th> 
       Tomorrow<br> 
       <select name="BIL_RateId1[]" class="form-control"> 
        <option value="" data-name="" data-description="" data-rate="" selected="">Tarif personnalisé</option> 
        <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option> 
       </select> 
      </th> 
      <td> 
       <div class="col-sm-12"> 
        <input type="text" name="BIL_Rate1[]" class="form-control" required=""> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JS：

$("select[name='BIL_RateId1[]']").on('change', function() { 
    var selected = $(this).find('option:selected'); 
console.log(selected); 
    var name = selected.attr('data-name'); 
    var description = selected.attr('data-description'); 
    var rate = selected.attr('data-rate'); 

    if(rate!='') { 
     $(this).closest("tr").find("input[name='BIL_Rate1[]']").val(rate).prop('readonly', true); 
    } 
    else { 
     $(this).closest("tr").find("input[name='BIL_Rate1[]']").val('').prop('readonly', false); 
    } 
});