Question

我正在使用两个完全相同的select标签，它们的id也是。

<select name ="state" id ="state" onclick="populateStates2('state')"></select>
<select name ="state" id ="state" onclick="populateStates2('state')"></select>

和我的js：

populateStates('state');

var state_arr = new Array("Andaman and Nicobar Islands","Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chandigarh","Chhattisgarh","Dadra and Nagar Haveli","Daman and Diu","Delhi","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Lakshadweep","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Pondicherry","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttar Pradesh","Uttaranchal","West Bengal");

function populateStates2(stateElementId){
// given the id of the <select> tag as function argument, it inserts <option> tags
var stateElement = document.getElementById(stateElementId);
stateElement.length=0;
stateElement.options[0] = new Option('Select state','-1');
stateElement.selectedIndex = 0;
for (var i=0; i<state_arr.length; i++) {
    stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
}

}

所以在这里，我通过具有相同id的不同标签两次调用populateStates，但只有第一个选择标签有效。是否有任何解决方法，以便我可以调用它们但具有相同的id / name / classname？我想一次运行这个功能。

Answer 1

在必须严格相同的ID时，无法使DOM正常运行。 ID在DOM中非常具体和独特。基本上用于创建HTML元素的索引，可以比常规标记或类选择器更快地访问它。

然而，您应该使用类，或直接通过标记名称或querySelection javascript方法处理选择。

https://www.w3schools.com/Tags/att_global_id.asp

Answer 2

如果要在单击元素时执行函数，则应将this传递给函数：

<tag onclick="populateStates2(this)"></tag>

然后，您将把元素作为函数的第一个参数：

function populateStates2(myElement) {
  // do stuff with myElement
}

所以，你有一个函数，它将一个元素作为第一个参数并用它来做事如果你想将这个函数应用于多个元素，你可以根据需要多次调用它。

要将元素组合在一起，您可以使用类：

<tag id="id1" class="led_zep"> </tag>
<tag id="id2" class="led_zep"> </tag>

然后，你可以循环它并调用你的函数：

Array.from(document.getElementsByClassName('led_zep')).forEach(function(myElem) {
  populateStates2(myElem);
});

修改

如果您希望以编程方式设置onclick函数，请执行以下操作：

var myClickableElem = document.getElementById('id1'); myClickableElem.onclick = function() { populateStates2(myElem); }

对多个元素执行相同的操作：

Array.from(document.getElementsByClassName('led_zep')).forEach(function(myElem) { myElem.onclick = function() { populateStates2(myElem); } });

希望它有所帮助，
最好的问候，

Answer 3

而不是getElementById，您可以使用getElementsByTagName()[index]或getElementsByName()[index]

它们都返回HTML Collection。

所以，重写下面的代码

<select name ="state" id ="state" onclick="populateStates2('state',0)"></select>
<select name ="state" id ="state" onclick="populateStates2('state',1)"></select>

然后你的功能为

var state_arr = ["Andaman and Nicobar Islands","Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chandigarh","Chhattisgarh","Dadra and Nagar Haveli","Daman and Diu","Delhi","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Lakshadweep","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Pondicherry","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttar Pradesh","Uttaranchal","West Bengal"];

function populateStates2(stateElementId,index){
    var stateElement = document.getElementsByName(stateElementId)[index];
    stateElement.length=0;
    stateElement.options[0] = new Option('Select state','-1');
    stateElement.selectedIndex = 0;
    for (var i=0; i<state_arr.length; i++){
        stateElement.options[stateElement.length] = new Option(state_arr[i],state_arr[i]);
    }
}

注意

此处我们未使用id属性。

在页面中，id应该是唯一的。

使用具有相同id的两个不同标签调用javascript函数

3 个答案:

注意