JAVASCRIPT - HOW TO Add NO Duplicates to HTML Select vai 2 LInes Code - Javascript Source Code

JAVASCRIPT - HOW TO Add Items to HTML Select Element, NO Duplicates, NO Loop, 2 Lines Javascript Code

Almost all code you see online to add option elements text to an html select element listbox involved iterating through a loop, with long winded code to compare the item you wish to add to the select element with EACH of the options that already exist in the select html element. If the item you wish to add to the select element is not found in any of the option elements that are already there, the new text gets added to the select element. A huge waste of time and resources.

function funcSelectOption_IsDuplicate(selectID, textToAdd) { let selElem = document.getElementById(selectID); // YOU CHECK FOR THE ALREADY EXISTENCE OF THE ITEM YOU WISH TO ADD // TO THE SELECT ELEMENT BY SIMPLY ASSIGNING THE NEW TEXT/OPTION // YOU WISH TO ADD TO THE SELECT ELEMENTS VALUE selElem.value = textToAdd; // IF THE OPTION ITEM IS ALREADY THERE THEN THE SELECTED INDEX WILL // BE THE INDEX NUMBER OF WHERE THE OPTION ELEMENT ALREADY EXISTS // OTHERWISE THE RETURN OF [.selectedIndex] WILL BE -1 if(selElem.selectedIndex !== -1){return true;}else{return false;} }

Try the Javascript Simplified Add Non Duplicates to Select Element Yourself

Below is a select element with some option values added to it. Try entering text in the textbox below that is already in the select element and notice that if it already exists it gets selected/highlighted, meaning the function returned the index number of the option element. If the option element does NOT already exist in the select element below, the return value will be -1 and the function returns FALSE, indicating it does not already exists and is NOT a duplicate.

Feel free to right click this web page and view source to see the Javascript code for yourself.

 Is Duplicate?

red ants green apples red face tripping butterflies