jQuery - 通过其文本描述设置选择控件的选定值

javascript jquery

2022-08-29 23:01:35

我有一个选择控件，在javascript变量中，我有一个文本字符串。

使用jQuery，我想将select控件的选定元素设置为具有我拥有的文本描述的项（而不是我没有的值）。

我知道按值设置它是微不足道的。例如：

$("#my-select").val(myVal);

但是我有点难通过文本描述来做到这一点。我想一定有办法从文字描述中获取价值，但我的大脑太周五下午了，无法解决它。

答案 1

按描述选择 jQuery v1.6+

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

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

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

jQuery 版本低于 1.6 且大于或等于 1.4

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

请注意，虽然此方法适用于高于 1.6 但低于 1.9 的版本，但自 1.6 以来已弃用。它在jQuery 1.9 +中不起作用。

以前的版本

val()应该处理这两种情况。

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

答案 2

我还没有测试过这个，但这可能对你有用。

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });