Hinzufügen eines Datenattributs zu einer dynamisch erstellten Schaltfläche, wenn ein Benutzer ein Auswahlfeld auswählt

Question

Ich habe eine jquery mobiile App, die Hunderte von Tabellen enthält. Ich habe am Ende jeder dieser Tabellen eine dynamische Zeile hinzugefügt, die eine Schaltfläche mit einem Attribut "Datenname" enthält, das direkt vom Tabellenkopf dieser Tabelle abgeleitet ist.

Diese Tabellen werden verwendet, um verschiedene Produkttypen zu katalogisieren, von denen einige unterschiedliche Größen pro Modell haben und andere nicht. Was ich gerne tun könnte, ist für diejenigen, die mehrere Größen pro Modell haben, fügen Sie eine Auswahlbox zur Tabelle hinzu, die dann das Attribut data-name aktualisiert, um diese vom Benutzer ausgewählte Größe einzuschließen.

Bisher habe ich es geschafft, die Select-Box zu bekommen, den Text am unteren Rand zu aktualisieren, anstatt sie auf die corresonding Button am Ende das Hinzufügen ...

<table> 
    <tbody> 
     <tr> 
      <th>Model</th> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
     </tr> 
     <tr> 
      <td>Weight</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>Size</td> 
      <td class="sizeSelect"> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
      <td> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
      <td> 
      <select> 
       <option data-size="option1">Option 1</option> 
       <option data-size="option2">Option 2</option> 
       <option data-size="option3">Option 3</option> 
       <option data-size="option4">Option 4</option> 
      </select> 
      </td> 
     </tr> 
     <tr> 
      <td>something</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>else</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

<table> 
    <tbody> 
     <tr> 
      <th>Model</th> 
      <th>HTL-L4</th> 
      <th>HTL-L8</th> 
      <th>HTL-L</th> 
     </tr> 
     <tr> 
      <td>Weight</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>Size</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>something</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>else</td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

hinzufügen, um dort das Skript ist.

..

// appends a row to the bottom of the tables for Add to Cart Button to be inserted into 
      $('table > tbody').append('<tr class="cartRow"></tr>'); 
      $('table > tbody > tr:last-child').append('<td>Enquire Now</td>'); 

      $('table').each(function() { 
       var $this = $(this); 
       $('tbody > tr > th:not(:first)', this).each(function(){ 


        // appends a cell to the row 
        $('tbody > tr:last-child', $this) 
         .append('<td class="cartButton"><a class="add-to-cart button" data-name="'+$(this).text()+'" href="#basket" style="padding-top:0 !important;margin-bottom:0 !important; height: 3rem !important; line-height: 3rem !important;">Add</a></td>'); 
       }); 

     $('select', $this).change(function(){ 

     $variable = $(this).find(':selected').data('size'); 

     $('.cartButton a', $this).text($variable); 


     }); 

Answer 1

Wenn ich Sie richtig verstehe, wollen Sie die gewählte Größe der data-name Attribut der Schaltfläche hinzufügen, so sollte dies tun:

Chang Diese E:

$('.cartButton a', $this).text($variable); 

Um dies:

$buttondata = $('.cartButton a', $this).data("name") + ', size ' + $variable; 
$('.cartButton a', $this).data("name",$buttondata); 

Mit diesem Code, sollten Sie mit diesem Ende in data-name: [vorherigen Daten], Größe [Größendaten]