Question

我想基于将包含在选项值之一中的子字符串在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。

Answer 1

由于querySelector()支持任何有效的CSS选择器，因此可以尝试包含（*=）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>

您也可以使用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>

Answer 2

如果正则表达式只是一个简单的包含，您可以直接指向选项值

const optToSelect = document.querySelector('option[value*=${SUBSTRING}]');
document.querySelector("select").selectedIndex = optToSelect.index;

Answer 3

您可以对 find 和 includes 使用普通的DOM方法：

function updateOther(source) {
  let value = source.value;
  let sel = document.querySelector('.select-provincie');
  sel.selectedIndex = [].find.call(sel.options, opt => opt.value.includes(value)).index;
}

<select onchange='updateOther(this)'>
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="select-provincie">
  <option value="province1" selected>Province 1</option>
  <option value="province2">Province 2</option>
  <option value="province3">Province 3</option>
  <option value="province4">Province 4</option>
</select>

但是它不是容错的：如果找不到合适的值，它将抛出错误（其他答案也是如此）。：-）

Answer 4

JQuery恰恰在您想要简化解决方案并确保其在优化方面切实可行时很有趣。因此，我想为您带来一个JQuery解决方案。

var selectedProvince = 'province3';
$(".select-provincie > option").each((index, elem) => {
if (elem.value == selectedProvince) {$(elem).attr('selected', true)};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_provincie">

<select class="select-provincie">
  <option value="province1">Province 1</option>
  <option value="province2">Province 2</option>
  <option value="province3">Province 3</option>
  <option value="province4">Province 4</option>
</select>

</div>

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

4 个答案: