I have a pick list like the following:
<select multiselect="false" name="some.name" size="1" id="queuePicklist"
onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value=""
style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to know if it's possible that in setQueue() function select one of the options without using the value? So instead of document.getElementById("queuePicklist").value = 'Support';
Can I add a data attribute to the options and select the option that way so I can keep the values as they are. Note: as seen in the example four of the options have the same value.
I know I can put these values (1,2,1,1,1) into the data attribute and use unique values in the 'value' field and that was my first approach but since I'm working with some legacy code, that change made other parts of other codes to break.
I'm not exactly sure what or how you want to get an option, but you can access the text like this.
function setQueue() {
var selectEle = document.getElementById("queuePicklist");
// .options returns an HTMLOptionsCollection object.
// use the selectedIndex property to get the selected option, then
// you can access the text or value.
console.log(selectEle.options[selectEle.selectedIndex].text);
}<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>