我知道选择选项的一部分价值,我想用JS设置该选项吗?

Sl4rtib4rtf4st

我想基于将包含在选项值之一中的子字符串在select元素中设置一个选项。我有一个解决方案,但对我来说似乎很麻烦。

我得到选项的值并将它们放在数组中,遍历这些值,并检查该值是否包含我在将其设置为选择值时要查找的字符串。一定有更简单的方法!

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

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

马门

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

[attr*=value]

表示属性名称为attr的元素,其值包含至少一个在字符串中出现的值。

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>

您还可以将模板文字用于更清晰的语法:

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章