Füllen Sie den Eingang nach der Änderung auf einer Auswahl

Befolgen Sie die folgende Tabelle, wie kann ich die Zeileneingabe bei Auswahl ändern?Füllen Sie den Eingang nach der Änderung auf einer Auswahl

Ich habe mehrere Zeilen als die eine.

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

Ich habe tatsächlich:

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

Vielen Dank.

Quelle

2017-07-10 user8201518

Das 'name' Attribut des' input' Tag „BIL_Rate [] ". Was ist mit den Klammern? – Chet

Ursache das Endergebnis sollte behandelt werden wie ein Array. Ich habe mehrere Zeilen so. – user8201518

die Attributselektor verwenden zu können, müssen Sie die zwei Sätze von Anführungszeichen verwenden .
Ein Satz für den Selektor selbst ...
Und einen für den Wert des Attributs, den Sie suchen.

Also $('select[name=RAT_Rates]') sollte $("select[name='RAT_Rates']") sein.

Dann (das ist geringfügig, aber gültige HTML hilft immer), Ihr select Element wurde nicht geschlossen.

$("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>

Quelle

2017-07-10 01:05:30

Hallo, deine Lösung funktioniert bu außer wenn ich nur eine Zeile habe die ist leider nicht mein Fall. Ich habe mehrere Zeilen wie diese, so dass Ihr Code einmal die Auswahl ändert, füllen Sie alle anderen Eingaben mit dem Wert. Ich brauche nur den einen in der gleichen Reihe. Tut mir leid, wenn es unklar war. – user8201518

Ich habe bearbeitet ... Kein Problem damit! ;) –

Sie können die parent() verwenden und suchen Sie die Klasse innerhalb mit find(). Überprüfen Sie mein Update-Code unten:

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); 
});

Quelle

2017-07-10 00:55:33 smzapp

Hallo, da ich mehrere Zeilen wie in meiner Frage habe, kann ich deine Lösung momentan nicht verwenden. Es tut uns leid. – user8201518

Ohh .. Okay .. ich habe meine Antwort aktualisiert .. Schau es dir an .. – smzapp

hier ist das, was Sie wollen -

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

Dank

Quelle

2017-07-10 01:21:05 Harsheet

Ich habe mehrere Zeilen wie die in meiner Frage erwähnt. Ich denke, dein Code wird alle meine Eingabe nicht füllen? – user8201518

Wenn Sie mehrere Zeilen haben, dann auch mehrere Dropdowns ??? – Harsheet

Ja, ich habe die Frage aktualisiert, da sie zu Beginn unklar war. Es tut uns leid. – user8201518

Füllen Sie den Eingang nach der Änderung auf einer Auswahl

Antwort

Verwandte Themen