Handling Multiple ids in java script

Question

Suppose I have following code:

<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>

how to get the id of the current box. like if select top select box or if i select bottom box. Please help me to find a solution. I know with same ids is not the porper coding standard. But i have a situation like this.

You shouldn't duplicate ID's, ID's are supposed to be unique as they Identify a specific element. — NewToJS
– NewToJS, Commented May 10, 2015 at 16:08
Yes i know that. But i have a situation like this.<select id="itemsPage" onClick="changeItems(this.value);"> <option value="0">12 Items per Page</option> <option value="100">View All</option> </select>..this snippet of code is present in a jsp and i included it two times in same parent JSP. — bappa147
– bappa147, Commented May 10, 2015 at 16:12

Katya Pavlenko · Accepted Answer · 2015-05-10 16:09:37Z

1

This is not a valid HTLM code, all ids should be unique

But anyway you can use this code to get second checkbox

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

if you need to browse through specific checkboxes, set them all some special class and use

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

answered May 10, 2015 at 16:09

Katya Pavlenko

3,4033 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NewToJS Over a year ago

Checkbox? shouldn't this be select ? document.querySelectorAll('select')[1]

Alex McMillan · Accepted Answer · 2015-05-10 16:14:45Z

1

If you "want to get the id of the current box", it will always be "itemsPage".

Having 2 objects in the DOM with the same ID is not valid HTML.

However, if you can change the DOM but can't change the IDs for some reason, you could do something like this:

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

and then make your function:

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

Ultimately you should try and change one of the IDs, or use classes instead.

answered May 10, 2015 at 16:14

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

Comments

guest271314 · Accepted Answer · 2015-05-10 16:31:05Z

Try utilizing HTMLElement.dataset to substitute duplicate ids ; data-id="itemsPage-1" for first id=itemsPage ; data-id="itemsPage-2" for secondid=itemsPage ; pass selected element dataset.id at onClick event onClick="changeItems(this.value, this.dataset.id);"

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

<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>

NewToJS · Accepted Answer · 2015-05-10 16:37:05Z

I think I know what it is you're trying to but this is a shot in the dark.

If you can change from using id to class this will work just fine.

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>

If you have any questions please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Collectives™ on Stack Overflow

Handling Multiple ids in java script

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related