jQuery/Ajax: ajax Verwenden, um füllen Sie Felder auswählen, die in einer dynamischen form

HTML:

<form name="order" action="order_stuff.php" method="post">
<table id="myTable">
<thead>
<tr><td></td><th>Group</th><th>Item</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select name="group1" id="ctlGroup">
<option value="dimensioner">Dimensioner</option>
<option value="scanner">Scanner</option>
<option value="scale">Scale</option>
<option value="camera">Cameras</option>
<option value="computer">Computer</option>
<option value="network">Network</option>
<option value="cables">Cables</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<select name="item1" id="ctlItem">
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="quantity1" value="" />
</td>
</tr>
</tbody>
<tfoot>
<tr><td><a href="#" id="addVar">Add Item</a></td><td colspan="2"></td><td><input type="submit" name="submit" value="Place Order" /></td></tr>
</tfoot>
</table>
</form>

JAVA:

$('form').on('click', '.removeVar', function(){
    $(this).parent().remove();
});

//add a new node
var varCount = 2;
$('#addVar').on('click', function(){
   $node = '<tr><td>'+varCount+'</td><td><select name="group'+varCount+'" id="ctlGroup">       <option value="dimensioner">Dimensioner</option><option value="scanner">Scanner</option><option value="scale">Scale</option><option value="camera">Cameras</option><option value="computer">Computer</option><option value="network">Network</option><option value="cables">Cables</option><option value="Other">Other</option></select></td><td><select name="item'+varCount+'" id="ctlItem><option value=""></option></select></td><td><input type="text" name="quantity'+varCount+'" value="" /></td></tr>';
   $("#invars").val(varCount);
   $('#myTable > tbody:last').append($node);

   varCount++;
});

$("select#ctlGroup").change(function() {
    $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';

        for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("select#ctlItem").html(options);
    });
});

$("#myTable").on('change', "#ctlGroup", function(){
    $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';

        for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }

        $("select#ctlItem").html(options);
    });
});

Ich versuche ein dynamisches Formular mit einer dynamischen auswählen, die geändert wird, basierend auf den ersten wählen. Mein problem ist, dass die erste Zeile, die erstellt wird, wenn die Seite geladen wird, funktioniert gut, aber wenn ich die zweite Zeile und ich die ersten wählen Sie in dieser Zeile, die es setzt den dynamischen wählen Sie in der ersten Reihe. Wie kann ich das ändern das javascript, so dass die erste wählen Sie in jeder Zeile nur auf das zweite wählen Sie in der gleichen Zeile?

Vielen Dank für jede Hilfe mit diesem.

  • Sie sind mit der gleichen element-IDs mehrfach, wird dies nicht funktionieren (oder funktionieren wird unerwartet in unterschiedlichen Browsern), als element-ID ist eine einzigartige - Darstellung des Elements über die gesamte Seite - bitte ändern Sie Ihren code entsprechend, dann könnten wir in der Lage sein, um Ihnen zu helfen
InformationsquelleAutor Mark Henshaw | 2013-09-26
  1. 2

    Ich einige änderungen an der code getestet und in einem lokalen server ... es funktioniert einfach gut:

    http://jsfiddle.net/r4ffel/fYm2r/

    Html:

    <form name="order" action="order_stuff.php" method="post">
<table id="myTable">
    <thead>
        <tr>
            <th></th>
            <th>Group</th>
            <th>Item</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="count">1</td>
            <td>
                <select name="group" class="ctlGroup">
                    <option value="dimensioner">Dimensioner</option>
                    <option value="scanner">Scanner</option>
                    <option value="scale">Scale</option>
                    <option value="camera">Cameras</option>
                    <option value="computer">Computer</option>
                    <option value="network">Network</option>
                    <option value="cables">Cables</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <select name="item" class="ctlItem"> 
                    <option value=""></option>
                </select>
            </td>
            <td>
                <input type="text" name="quantity1" value="" />
            </td>
            <td>
                <input type="button" value="X" class="removeVar"/>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <input type="button" id="addVar" value="Add Item"/>
            </td>
            <td colspan="2">
            </td>
            <td>
                <input type="submit" name="submit" value="Place Order"/>
            </td>                
        </tr>
    </tfoot>
</table>
</form>

    Js:

    $('form').on('click', '.removeVar', function(){
  $(this).closest('tr').remove();
  $('.count').each(function(i){
    $(this).text(i + 1);
  });
});
$('#addVar').on('click', function(){
  var varCount = $('#myTable tr').length - 1;
  $node = ['<tr>',
  '<td class="count">'+varCount+'</td>',
  '<td><select name="group" class="ctlGroup">',
  '<option value="dimensioner">Dimensioner</option>',
  '<option value="scanner">Scanner</option>',
  '<option value="scale">Scale</option>',
  '<option value="camera">Cameras</option>',
  '<option value="computer">Computer</option>',
  '<option value="network">Network</option>',
  '<option value="cables">Cables</option>',
  '<option value="Other">Other</option>',
  '</select></td>',
  '<td><select name="item" class="ctlItem">',
  '<option value=""></option>',
  '</select></td>',
  '<td><input type="text" name="quantity" value=""/></td>',
  '<td><input type="button" value="X" class="removeVar"/>',
  '</td></tr>'].join('\n');
  $('#myTable > tbody:last').append($node);
});

$("#myTable").on('change', ".ctlGroup", function(){
  var row = $(this).closest('tr');
  $.getJSON("/ajax-select.php",{id: $(this).val(), ajax: 'true'},function(j){
    var options = '';        
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].title + '">' + j[i].title + '</option>';
    }    
    row.find(".ctlItem").html(options);
  });
});
    InformationsquelleAutor rafaelcastrocouto
Schreibe einen Kommentar