Show Multi Select Id By Js October 26, 2023 Post a Comment I need show selection id by js, by this code only show 1 and first select id my code is this html and javascript Solution 1: The id attribute should be unique within the page otherwise only the first one gets selected(using id selector), for a group of elements use a common class instead and within the change event handler use this to refer the clicked element.<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td><selectname="jens_id[]"class="jens_id"required=""><option ></option><option >1</option><option >2</option></select></td><td></td></tr><tr><td><selectname="jens_id[]"class="jens_id"required=""><option ></option><option >1</option><option >2</option></select></td><td></td></tr></table><script> $(document).ready(function() { // or use attribute equals selector// $('[name="jens_id[]"]') $('.jens_id').change(function() { statteId = $(this).val(); // or this.valueconsole.log(statteId); // get the td and update with value $(this).parent().next().text(statteId); }); }); </script>CopySolution 2: Try with each() function of jquery .And change the selector with Tagname or ClassName instead of id .Id is a unique for full document$(document).ready(function() { $('select').each(function(){ console.log($(this).val()) }) });Copy<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tr><td><selectname="jens_id[]"id="jens_id"required=""><option ></option><optionselected>1</option><option >2</option></select></td></tr><tr><td><selectname="jens_id[]"id="jens_id"required=""><option ></option><option >1</option><optionselected>2</option></select></td></tr>CopySolution 3: $(document).ready(function() { $('.jens_id').change(function() { statteId = $('option:selected', this).text() alert(statteId); }); });Copy<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname="jens_id[]"class="jens_id"required=""><option ></option><option >1</option><option >2</option></select><selectname="jens_id[]"class="jens_id"required=""><option ></option><option >3</option><option >4</option></select>CopyID should be unique, use class and use this context to tell the current changed selectSolution 4: You are already aware now that id of the element on page should be unique.When you have multiple elements with same id then id(#) selector returns the first matched element. So as mentioned in other answers you should use class if possible.By any reason if you can't use the class and want to find with id then you can use it like $('select#jens_id') or $('[id="jens_id"]') and to get the selected option use context to this which will find the selected option for changed select element.$(document).ready(function() { $('select#jens_id').change(function() { alert($(this).find('option:selected').text()); }); });Copy<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectname="jens_id[]"id="jens_id"required=""><option ></option><option >1</option><option >2</option></select><selectname="jens_id[]"id="jens_id"required=""><option ></option><option >3</option><option >4</option></select>CopyAdd multiple attribute to select if multiple values needs to be selected. Share Post a Comment for "Show Multi Select Id By Js"