Javascript 小书签：如何 return 基于标题的下拉值

Question

我有一个下拉菜单，其中的选项数量可变。

{选项 A，选项 B，选项 C，...}

选项并不总是可用，因此最初值可能分别为 {0,1,2,...} 但如果选项 A 不在下拉列表中，则选项 B 的值为 0，C 的值为值 1 等等。我想创建一个小书签，当它被激活时，它将在下拉列表中 select 选项 C。

原来我是这样尝试的

javascript:(function(){document.getElementsByTagName('Select')[1].value = 0;})();

但值 0 并不总是等于选项 C。

我的下一个计划是使用：

javascript:(function(){document.getElementsByTagName('Select')[1].title = "Option C";})();

虽然它确实对 HTML 代码进行了更改，但并未对实际网站进行更改。

现在我想知道是否有办法 return 基于标题的选项的值？ Javascript 仍然是全新的，但感谢您提供的任何帮助。

编辑 1：由于某些原因，我无法展示真实的 HTML，但这就是它的样子。

<select id="DropDown::Content" name="DropDown" class="x2h" title> <option value="0" title="Option A">Option A </option> <option value="1" title="Option B">Option B </option> <option value="2" title="Option C">Option C </option>

Answer 1

您不能设置标签，但您可以通过下拉菜单，检查标签，找到 "Option C"，获取它的值并为您的 Select 框设置它的值。

这是一个示例，我们为第二个下拉菜单设置 "Option C"，而不考虑其值。

function selectOptionC () {
  
  const selectOptions = document.getElementsByTagName("Select")[1].options;
  for(let i = 0; i < selectOptions.length; i++) {
    // we can check label and set value based on that
    if (selectOptions[i].label == 'Option C') {
      document.getElementsByTagName("Select")[1].value = selectOptions[i].value;
    }
  }
}

selectOptionC();

<select id="dropdown-a" title="testing title">
  <option>titleA</option>
  <option>titleB</option>
  <option>Option C</option>
</select>

<select id="dropdown-b" title="testing title 2">
  <option value='0'>titleC</option>
  <option value='1'>titleD</option>
  <option value='2'>Option C</option>
  <option value='3'>titleD2</option>
</select>

<select id="dropdown-c" title="testing title 3">
  <option>titleE</option>
  <option>titleF</option>
</select>

Javascript 小书签：如何 return 基于标题的下拉值

Javascript bookmarklet: how to return value of a drop down based off of title

javascript

bookmarklet