選択後に入力後に入力を入力する

Question

次の表に従って、選択変更時に行入力をどのように設定できますか？

私は1つとして複数の行を持っています。

<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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th> 
      <td> 
       <div class="col-sm-12"> 
        <input type="text" name="BIL_Rate[]" class="form-control" required=""> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

私が実際にしました：

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

    $(this).next('input[name=BIL_Rate]').val(rate); 
}); 

おかげで多くのことを。

Answer 1

属性セレクタを使用するには、引用符の2セットを使用する必要があります。
セレクタ自体のための1つのセット...
あなたが探している属性の値の1つ。

したがって$('select[name=RAT_Rates]')は$("select[name='RAT_Rates']")である必要があります。

（これはマイナーですが、有効なHTMLが常に役立ちます）、select要素は閉じられませんでした。ここ

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

 
    $(this).closest("tr").find("input[name='BIL_Rate[]']").val(rate); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<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="RAT_Rates" class="form-control"> 
 
      <option data-name="" data-description="" data-rate="" selected="">Custom</option> 
 
      <option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option> 
 
     </select> 
 
     </th> 
 
     <td> 
 
     <div class="col-sm-12"> 
 
      <input type="text" name="BIL_Rate[]" class="form-control" required=""> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

parent（）を使用して、find（）を使用して内部でクラスを見つけることができます。以下のチェック私の更新コード：

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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th> 
     <td> 
      <div class="col-sm-12"> 
       <input type="text" name="BIL_Rate[]" class="form-control input_rate" required=""> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <th>Today<br><select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th> 
     <td> 
      <div class="col-sm-12"> 
       <input type="text" name="BIL_Rate[]" class="form-control input_rate" required=""> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <th>Today<br><select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th> 
     <td> 
      <div class="col-sm-12"> 
       <input type="text" name="BIL_Rate[]" class="form-control input_rate" required=""> 
      </div> 
     </td> 
    </tr> 
</tbody> 

Javascriptを：

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

$(this).parent().parent().find('.input_rate').val(rate); 
}); 

Answer 3

何をしたいです -

$('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'); 
 
    $(this).closest('td').next('td').find($("input[name='BIL_Rate[]']")).val(rate); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped table-bordered"> 
 
    <tbody> 
 
     <tr> 
 
      <th width="60%">Date</th> 
 
      <th width="40%">Rate</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <div> 
 
      Today 
 
      </div> 
 
       <select name="RAT_Rates" class="form-control"> 
 
       <option data-name="" data-description="" data-rate="" selected="">Custom</option> 
 
       <option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option> 
 
       </select> 
 
      </td> 
 
      <td> 
 
       <div class="col-sm-12"> 
 
        <input type="text" name="BIL_Rate[]" class="form-control" required=""> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
     <td><div> 
 
     Tomorrow 
 
     </div> 
 
      <select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select> 
 
      </td> 
 
      <td> 
 
       <div class="col-sm-12"> 
 
        <input type="text" name="BIL_Rate[]" class="form-control" required=""> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

`input`タグのおかげ