javascript - 我知道一个选择选项的部分值(value)，我想用 JS 设置那个选项？

Question

我想根据将包含在其中一个选项值中的子字符串在选择元素中设置一个选项。我有一个解决方案，但对我来说似乎很复杂。

我获取选项的值并将它们放在一个数组中，循环遍历这些值并检查该值是否包含我正在寻找的字符串，当我将该值设置为选择值时。一定有更简单的方法!

我通过以下方式获取选项的值。

// Get the select element where you can select a procinve with a pull-down
var provincePullDown = document.querySelector(".select-provincie");
// Array containing the values of the select options
var optArray = Array.from(provincePullDown.options);
var optArrayValues = [];
optArray.forEach(el => optArrayValues.push(el.value));

然后我遍历查找可能的子字符串的值。

// Loop over the values in the select options
optArrayValues.forEach(function (el) {
  // Look for the option containing the right province
  if (el.includes(selectedProvince)) {
    // Set the selected option from the select element
    provincePullDown.value = el;
  }
});

选项值看起来像这样 sting (3) 和像这样的子字符串 string。

我想知道是否有更简单的方法，对我来说这似乎是一个过于复杂的解决方案。并牢记维护我想要一个清晰的解决方案，我在 6 个月后仍能轻松理解。

该页面由 Drupal 创建，因此我还控制输出的 html 以及在 Drupal 模板中插入的选项值。我还要声明，我不是 jQuery 的粉丝，尽管该项目默认加载 jQuery。

Answer 1

作为querySelector()支持任何有效的 CSS 选择器，您可以尝试使用 contains (*=) Attribute selector :

[attr*=value]

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

var selectedProvince = 'province';
document.querySelector(".select-provincie option[value*='"+selectedProvince+"']").selected = true;

<select class="select-provincie">
  <option value="prov-1">Province 1</option>
  <option value="prov-2">Province 2</option>
  <option value="province-test">Province 3</option>
  <option value="prov-3">Province 4</option>
</select>

您还可以使用 Template Literals更简洁的语法:

var selectedProvince = 'province';
document.querySelector(`.select-provincie option[value*='${selectedProvince}']`).selected = true;

<select class="select-provincie">
  <option value="prov-1">Province 1</option>
  <option value="prov-2">Province 2</option>
  <option value="province-test">Province 3</option>
  <option value="prov-3">Province 4</option>
</select>