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

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

javascript html

Javascript 如何复制两个功能连接的下拉按钮？,javascript,html,Javascript,Html,我想创建一个程序，在这个程序中，我可以一次又一次地复制div，其中包含两个下拉按钮和输入表单。复制一个div及其元素已经解决了，问题是这个div包含两个下拉按钮，它们由一个函数连接：当选择一个按钮选项时，另一个显示各自的选项。因此，使用这两个下拉按钮复制div是可行的，但它们不再连接。我如何声明，对于每个新的div，函数ChangeCarList将只处理这两个特定的div？很抱歉，这里的表述很混乱，但代码如下： <!DOCTYPE html> <html> <bod

我想创建一个程序，在这个程序中，我可以一次又一次地复制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>


--汽车--
沃尔沃汽车
大众
宝马
*
函数附加项（div）
{
var ediv=document.getElementById（“Item1”）；
var temp=ediv.innerHTML；
var newdiv=document.createElement（'div'）；
var divIdName=div+1；//我已将1作为向div添加id的示例
newdiv.setAttribute（'id'，divIdName）；
newdiv.innerHTML=temp；
ediv.parentNode.insertBefore（newdiv，ediv.nextSibling）；
}
var carsAndModels={}；
汽车模型['VO']=['V70'，XC60'，XC90']；
汽车模型['VW']=['Golf'，'Polo'，'Scirocco'，'Touareg']；
汽车和车型['BMW']=['M6'，X5'，Z3']；
函数changeCalist（）{
var carList=document.getElementById（“car”）；
var modelList=document.getElementById（“carmodel”）；
var selCar=carList.options[carList.selectedIndex].value；
while（modelList.options.length）{
模型列表。删除（0）；
}
var cars=carsAndModels[selCar]；
if（汽车）{
var i；
对于（i=0；i

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

函数更改列表（）{
var carList=事件目标；
控制台日志（carList）；
var modelList=carList.parentNode.querySelectorAll（'select'）[1]；
var selCar=carList.options[carList.selectedIndex].value；
while（modelList.options.length）{
模型列表。删除（0）；
}
var cars=carsAndModels[selCar]；
if（汽车）{
var i；
对于（i=0；i

重新编辑完整版本
<!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>


--汽车--
沃尔沃汽车
大众
宝马
*
函数附加项（div）
{
var ediv=document.getElementById（“Item1”）；
var temp=ediv.innerHTML；
var newdiv=document.createElement（'div'）；
var divIdName=div+1；//我已将1作为向div添加id的示例
newdiv.setAttribute（'id'，divIdName）；
newdiv.innerHTML=temp；
document.getElementById（'cars'）.appendChild（newdiv）；
}
var carsAndModels={}；
汽车模型['VO']=['V70'，XC60'，XC90']；
汽车模型['VW']=['Golf'，'Polo'，'Scirocco'，'Touareg']；
汽车和车型['BMW']=['M6'，X5'，Z3']；
函数changeCalist（）{
var carList=事件目标；
控制台日志（carList）；
var modelList=carList.parentNode.querySelectorAll（'select'）[1]；
var selCar=carList.options[carList.selectedIndex].value；
while（modelList.options.length）{
模型列表。删除（0）；
}
var cars=carsAndModels[selCar]；
if（汽车）{
var i；
对于（i=0；i
谢谢您的回复，但似乎不起作用。我无法发现问题。抱歉，我在chrome上进行了测试，它在不发送事件参数的情况下工作。进行2次快速更改HTML&&JS函数changeCalist（事件）进行这些更改，以便它可以在所有浏览器上工作