從克隆的元素獲取數據

Question

我有個問題。 以我的形式，我有div

<div class="wyksztalcenie">
<select id="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>

我已經將這個div克隆了五次，而我的問題是從輸入中獲取數據並在克隆的div中進行選擇。 在此用戶中，選擇受教育程度（高中，大學等），然后將其以“選擇-輸入-輸入-輸入”格式發送到數據庫。 可以，但是只有第一個div被保存到數據庫中。 誰能幫我

Answer 1

假設上面的代碼有五個相同的副本，則類似的事情應該起作用，您.wyksztalcenie按索引引用每個.wyksztalcenie實例：

// selects the first (index zero) instance of the cloned div
// substitute 1-4 for the zero to get the others
//
$('.wyksztalcenie').eq(0).find('select').val();

如果要遍歷它們，請使用each() ：

$('.wyksztalcenie').each(function() {
    var myVal = $(this).find('select').val();
    // do something with myVal
});

Answer 2

將name屬性添加到select元素，並將所有id屬性替換為class 。 然后，所有名稱屬性都應附加[] （例如： kier[] ）。

然后，您可以在處理頁面上的數組中找到所有五個。

Answer 3

我已經模擬了您的問題；

HTML （我想，您已經克隆了它）：

<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>
<div class="wyksztalcenie">
<select class="szkola">
    <option value="Wyższe">Wyższe</option>
    <option value="Średnie">Średnie</option>
    <option value="Zawodowe">Zawodowe</option>
</select> 
<input class="cos1" id="nazwa" name="nazwaszkoly" placeholder="nazwa uczelni/szkoły" type="text" /> 
<input class="cos1" id="kierunek" name="kier" placeholder="kierunek" type="text" /> 
<input class="cos1" id="rok" name="rok" placeholder="rok ukończenia" type="text" />
</div>

<input type="button" id="send" value="Send"/>

JS：

$("#send").on("click", function() {
    var html ="";
    var counter = 1;
    $('.wyksztalcenie').each(function() {
        var selectValue = $(this).find('select').val();

        var inputOne = $(this).find('#nazwa').val();
        var inputTwo = $(this).find('#kierunek').val();
        var inputThree = $(this).find('#rok').val();

        html += "select-" + counter + "=" + selectValue + "&input-" + counter + "=" + inputOne + "&input-" + counter + "=" + inputTwo + "&input-" + counter + "=" + inputThree;
        html += "&";
        counter++;
    });
    html = html.substring(0, html.length-1);

    // Send data here
});

您可以在此處查看工作演示： http : //jsfiddle.net/4egzF/

注意：將 selectbox ID更新為類。 ID必須是唯一的