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

How to copy two function-connected drop down buttons?

本文关键字：连接 按钮 功能 何复制 复制 两个      更新时间：2023-09-26

我想创建一个程序，在那里我可以反复复制一个div，它包含两个下拉按钮和输入表单。复制一个带有元素的div已经解决了，问题是这个div包含两个下拉按钮，它们通过一个函数连接：当选择一个按钮选项时，另一个显示各自的选项。因此，用这两个下拉按钮复制div是可行的，但它们不再连接。如何声明对于每个新的div，函数ChangeCarList将仅在特定的div中使用这两个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>

开始

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);
        }
    }
}

RE-EDIT FUll VerSIOn

<!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>
相关文章：