我可以使用 javascript 中的值以外的任何内容设置选择选项吗

Posted 2023-02-18

【中文标题】我可以使用 javascript 中的值以外的任何内容设置选择选项吗

【英文标题】：can I set the select option using anything other than value in javascript

【发布时间】：2021-11-12 12:25:35

【问题描述】：

我有一个如下的选择列表：

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

我想知道是否有可能在 setQueue() 函数中选择其中一个选项而不使用该值？所以不是document.getElementById("queuePicklist").value = 'Support';

我可以向选项添加数据属性并以这种方式选择选项，这样我就可以保持值不变。注意：如示例中所示，四个选项具有相同的值。

我知道我可以将这些值 (1,2,1,1,1) 放入数据属性并在“值”字段中使用唯一值，这是我的第一种方法，但因为我正在处理一些遗留问题代码，该更改使其他代码的其他部分中断。

【参考方案1】：

我不确定您想要什么或如何获得选项，但您可以像这样访问文本。

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>