Question

我想创建一个程序，我可以一遍又一遍地复制div，其中包含两个下拉按钮和输入表单。复制div及其元素已经解决了，问题是这个div包含两个下拉按钮，这些按钮由一个函数连接：当选择一个按钮选项时，另一个显示相应的选项。因此，使用这两个下拉按钮复制div工作，但它们不再连接。我如何声明每个新的div，函数ChangeCarList将与那两个特定的div一起工作？对不起，有一个混乱的配方，但这里是代码：

<!DOCTYPE html>
<html>
<body>  

<div id="Item1">

<select id="car" onchange="ChangeCarList()">
  <option value="">-- Car --</option>
  <option value="VO">Volvo</option>
  <option value="VW">Volkswagen</option>
  <option value="BMW">BMW</option>
</select>

<select id="carmodel"></select>
<input type="text" value="number1">
<input type="text" value="number2">

<TD width="200" rowspan="3" valign="top"></STRONG><span style="color: #ff0000">*</span>
<input type="button" name="" id="" value="+" onclick="addItem('Item1');" style="20;" class="FieldBlack"></input>
<input type="button" name="" id="" value="-" onclick="parentNode.remove()" class="FieldBlack"></input>
</TD>
</div>

<script>

function addItem(div)
{

var ediv=document.getElementById("Item1");
var temp=ediv.innerHTML;
var newdiv = document.createElement('div');
var divIdName=div+1;//i hav taken 1 for sample for adding id to the div
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =temp;
ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);
}
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
</script>

</body>
</html>

Answer 1

你去吧

function ChangeCarList() {
    var carList = event.target;
    console.log(carList);
    var modelList = carList.parentNode.querySelectorAll('select')[1];
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}

重新编辑FUIIOn

<!DOCTYPE html>
<html>
<body>  

<div id="cars">
<div id="Item1">

<select id="car" onchange="ChangeCarList()">
  <option value="">-- Car --</option>
  <option value="VO">Volvo</option>
  <option value="VW">Volkswagen</option>
  <option value="BMW">BMW</option>
</select>

<select id="carmodel"></select>
<input type="text" value="number1">
<input type="text" value="number2">

<TD width="200" rowspan="3" valign="top"></STRONG><span style="color: #ff0000">*</span>
<input type="button" name="" id="" value="+" onclick="addItem('Item1');" style="20;" class="FieldBlack"></input>
<input type="button" name="" id="" value="-" onclick="parentNode.remove()" class="FieldBlack"></input>
</TD>
</div>
</div>
<script>

function addItem(div)
{

var ediv=document.getElementById("Item1");
var temp=ediv.innerHTML;
var newdiv = document.createElement('div');
var divIdName=div+1;//i hav taken 1 for sample for adding id to the div
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =temp;
document.getElementById('cars').appendChild(newdiv);
}
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = event.target;
    console.log(carList);
    var modelList = carList.parentNode.querySelectorAll('select')[1];
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
</script>

</body>
</html>

如何复制两个功能连接的下拉按钮？

1 个答案: