Question

假设我有以下代码：

<div class="topPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select id="itemsPage" onClick="changeItems(this.value);">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<script>
   function changeItems(itemsPage) {
         want to get the id of the current <select> box.
}
</script>

如何获取当前框的id。就像选择顶部选择框或如果我选择底部框。请帮我找一个解决方案。我知道使用相同的ID不是porper编码标准。但我有这种情况。

Answer 1

这不是有效的HTLM代码，所有ID都应该是唯一的

但无论如何，您可以使用此代码获取第二个复选框

document.querySelectorAll('checkbox')[1];

如果您需要浏览特定的复选框，请将它们设置为一些特殊类并使用

document.querySelectorAll('.special_checkbox')[1];

Answer 2

如果您“想要获取当前框的ID”，它将始终为“itemsPage”。

在DOM中具有相同ID的2个对象是无效的HTML。

但是，如果您可以更改DOM但由于某种原因无法更改ID，则可以执行以下操作：

<select id="itemsPage" onClick="changeItems(this);">

然后制作你的功能：

function changeItems(select) {
    // "select" is your element
    // "select.value" is your value (that used to be passed in as "itemsPage"
}

最终，您应该尝试更改其中一个ID，或者改用类。

Answer 3

尝试使用HTMLElement.dataset替换重复的id;第一个data-id="itemsPage-1" id=itemsPage;第二个data-id="itemsPage-2" id=itemsPage;在dataset.id事件onClick

传递选定的元素onClick="changeItems(this.value, this.dataset.id);"

＆＃13;

function changeItems(itemsPage, id) {
 console.log(itemsPage, id)
}

＆＃13;

<div class="topPagination">
  <select data-id="itemsPage-1" onClick="changeItems(this.value, this.dataset.id);">
    <option value="0">12 Items per Page</option>
    <option value="100">View All</option>
  </select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
  <select data-id="itemsPage-2" onClick="changeItems(this.value, this.dataset.id);">
    <option value="0">12 Items per Page</option>
    <option value="100">View All</option>
  </select>
</div>

＆＃13;

Answer 4

我想我知道你在尝试什么，但这是在黑暗中拍摄的。

如果您可以从使用id更改为class，这样就可以了。

window.onload=function(){
 var PageItems=document.getElementsByClassName('itemsPage');
	for(var i=0; i<PageItems.length; i++){
  //Set Event Listeners for each element using itemsPage class name
	PageItems[i].addEventListener('change',changeItems,false);
	}
}
function changeItems(){
  // New selected index
var Selected=this.selectedIndex;
var changeItems=document.getElementsByClassName('itemsPage');
	for(var i=0; i<changeItems.length; i++){
      //Change all select options to the new selected index.
		changeItems[i].selectedIndex=Selected;
	}
}

<div class="topPagination">
<select class="itemsPage">
<option value="0">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>
<div id="mainContent">
</div>
<div class="bottomPagination">
<select class="itemsPage">
<option value="07">12 Items per Page</option>
<option value="100">View All</option>
</select>
</div>

如果您有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

在java脚本中处理多个id

4 个答案: