jquery - 如何强制从 JQuery 的选择菜单中选择一个选项？

Question

使用 JQuery 1.11，我无法强制选择一个选项。我知道选项的文本，所以我正在使用

.find('option[text="Canada"]')

但我的表情并没有找到该项目，尽管在控制台（下面列出的输出）中，您可以清楚地看到有一个选项显示“加拿大”。

> $('.countryField')
[<select id=​"user[address]​_country" name=​"user[address]​[country]​" class=​"countryField select-hidden">​…​&lt;/select>​&lt;option value=​"0">​-- Select --​&lt;/option>​&lt;option value=​"38">​Canada​&lt;/option>​…​&lt;option value=​"249">​Zimbabwe​&lt;/option>​&lt;/select>​]
> $('.countryField').find('option[text="Canada"]')
[]

我究竟做错了什么？最终，我希望为具有给定文本的选项启用“selected”属性（并且让所有其他选项都没有“selected”属性）。

Answer 1

您可以简单地使用jQuery val来选择您的元素。

$(function () {
  $("#speed").selectmenu();

  // select the Canada option
  $("#speed").val('Canada');
  $("#speed").selectmenu('refresh');
  
  // instead if you need to get the option with Canada text
  var selectedEle = $("#speed option").filter(function(i, e) {return $(e).text() == 'Canada';});
  console.log(selectedEle[0].outerHTML);
});

#speed {
  width: 200px;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<select name="speed" id="speed">
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
    <option>Canada</option>
</select>

Answer 2

您可以尝试以下方法之一。

$(".countryField option").each(function(){
  if ($(this).text() == "Canada")
    $(this).attr("selected","selected");
});


$(".countryField option[value='Canada']").attr("selected","selected");