帶2個選擇框的動態表

Question

我試圖做類似這樣 。 帶有按鈕的表，用於動態添加行。 效果很好，但我的問題是2個選擇框。 我想更改同一行中的選擇框，而不僅僅是第一個。 我怎樣才能做到這一點？

<form method="post" action="process.php">
    <input type="button" value="Add Row" onclick="addRow('dataTable')">
    <table id="dataTable" width="350px" border="1">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="chk[]">
                </td>
                <td>
                    <input type="text" name="txt[]">
                </td>
                <td>
                    <select id="countries" onchange="giveSelection(this.value)" name="tipo[]">
                        <option selected="selected" value="10000">--Select a country--</option>
                        <option value="1">Spain</option>
                        <option value="2">Germany</option>
                        <option value="3">U.S.A</option>
                    </select>
                </td>
                <td>
                    <select id="cities" name="cities[]">
                        <option selected="selected" data-option="10000">--Select a city--</option>
                        <option value="1" data-option="1">Madrid</option>
                        <option value="2" data-option="1">Barcelona</option>
                        <option value="3" data-option="1">Valencia</option>
                        <option value="4" data-option="2">Munich</option>
                        <option value="5" data-option="2">Berlin</option>
                        <option value="6" data-option="3">New York</option>
                        <option value="7" data-option="3">Houston</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="submit" value="Send">
</form>

這是我的JS代碼：

var countries = document.querySelector('#countries');
var cities = document.querySelector('#cities');
var cities2 = cities.querySelectorAll('option');


function giveSelection(selValue) {
    cities.innerHTML = '';
    for (var i = 0; i < cities2.length; i++) {
        if (cities2[i].dataset.option === selValue) {
            cities.appendChild(cities2[i]);
        }
    }
}



function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}

Answer 1

這是您的JsFiddle的更新版本。 該代碼可以進一步簡化，但是現在我剛剛更新了您的代碼，以便您可以輕松地理解修改。

以下是更改：

1. 添加了Jquery庫引用
2. 在更改事件而不是內聯事件上使用jQuery
3. 使用jQuery在更改的國家/地區的同一行中查找城市選擇列表
4. 對於“兩個選擇”，使用“類”代替“ Ids”，因為Id始終用於唯一性。