用javascript通过文本选择一个select选项

select a Select option by text with javascript

本文关键字：一个 select 选项 javascript 文本 选择      更新时间：2023-09-26

我有一个选择框和一个字符串，我将按字符串选择一个选项。例如string="Volvo"，然后像这样选择框:

 <select>
  <option value="v1">Volvo</option>
  <option value="v2">Saab</option>
  <option value="v3">Mercedes</option>
  <option value="v4">Audi</option>
</select>

有谁能帮帮我吗?

使用 :contains() 伪类选择器获取包含特定字符串的选项。对于更新检查的属性，使用 prop() 方法。

$('option:contains("Volvo")').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="v1">Volvo</option>
  <option value="v2">Saab</option>
  <option value="v3">Mercedes</option>
  <option value="v4">Audi</option>
</select>

对于精确匹配使用 filter() 方法，因为 :contains() 不检查精确匹配。

$('option').filter(function() {
  // check trimmed text for filtering 
  return $.trim($(this).text()) == "Mercedes";
}).prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="v1">Volvo</option>
  <option value="v2">Saab</option>
  <option value="v3">Mercedes</option>
  <option value="v4">Audi</option>
</select>

您可以使用:contains选择器来实现这一点:

var $option = $('select option:contains("Volvo")');

或者，为值使用一个变量:

var text = 'Volvo';
var $option = $('select option:contains("' + text + '")');

或者，您可以使用filter()来确保所需值的精确匹配:

var text = 'Volvo';
var $option = $('select option').filter(function() {
    return $(this).text().trim() == text;
});

从那里你只需要设置checked属性为true:

$option.prop('checked', true);
相关文章：