如何使用 jquery 更改所选项目？答案

【问题标题】：how to change selected item using jquery?如何使用 jquery 更改所选项目？
【发布时间】：2016-09-07 19:09:47
【问题描述】：

我有一个 html 下拉菜单如下所示

<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" >CBC</option>
</select>

我想使用 jquery 更改所选项目，如下所示。

var subCategorySelected = "CBC";    
$('#subCategory').find('option:contains(' + subCategorySelected + ')').attr({selected: "selected"});

但它不起作用。谁能帮我找出错误？

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

您的代码正在运行！

var subCategorySelected = "CBC";    
$('#subCategory').find('option:contains(' + subCategorySelected + ')').attr({selected: "selected"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" >CBC</option>
</select>

只需确保代码在页面完全加载后执行。这可以通过使用以下任何

来完成

将代码包装在ready处理程序中
将脚本移动到<body>的末尾

:contains 将检查传递的字符串是否包含在元素中的任何位置。因此，如果有多个元素包含该字符串，则会选择错误的选项。

示例：

<select>
    <option something="something">ABC DEF</option>
    <option something="something">ABC</option>
    <option something="something">ABC XYZ</option>
</select>

在这里，选择ABC - 第二个选项，如果我们使用:contains('ABC')，这将选择另一个选项。

您可以使用Attribute Equals Selector [name=”value”]

$('#subCategory option[name="' + subCategorySelected + '"]').prop('selected', true);

选择器option[name="' + subCategorySelected + '"] 将选择具有name 属性值的<option> 元素作为给定值。然后可以使用prop() 设置selected 属性。

var subCategorySelected = "CBC";
$('#subCategory option[name="' + subCategorySelected + '"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" >CBC</option>
</select>

如果你有option text和value的映射，使用value可以选择option作为

$('#subCategory').val('94');

【讨论】：

快！只是避免使用can，因为看起来OP所做的也是正确的......+1
@Rayon 谢谢你的提示。我已经更新了答案。没有意识到它是有效的代码。

【解决方案2】：

var subCategorySelected = "CBC";  
$('#subCategory option').filter(function() {

  return $(this).text() == subCategorySelected;


}).prop('selected', 'selected')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subCategory" class="style_1">
  <option name="All" value="16,17,19,18,8,94">All</option>
  <option name="CBC" value="94">CBC</option>
</select>

使用.filter()

【讨论】：

【解决方案3】：

虽然它可以使用 javascript 来完成，但如果你希望它被默认选中，你可以使用 selected 属性来完成

<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" selected>CBC</option>
</select>

JSFIDDLE

【讨论】：

title 说使用 Jquery 这不是使用 Jquery
它也被标记为html

【解决方案4】：

你可以像这样简单地使用。

var subCategorySelected = "CBC";  
$('#subCategory > [name="'+subCategorySelected+'"]').prop('selected','true')

var subCategorySelected = "CBC";  
$('#subCategory > [name="'+subCategorySelected+'"]').prop('selected','true')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" >CBC</option>
</select>

【讨论】：

【解决方案5】：

使用下面的选择器（CSS 3 style）也请看jQuery documentation：

E[foo="bar"] 含义：一个“foo”属性值正好等于“bar”的E元素。

在您的情况下，get element #subcategory 具有“name”属性值完全等于“CBC”并且更改属性为 selected。

var subCategorySelected = "CBC";    
$('#subCategory [name='+subCategorySelected+']').attr('selected','selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="subCategory" class="style_1">
     <option name="All" value="16,17,19,18,8,94" >All</option>
     <option name="CBC" value="94" >CBC</option>
</select>

【讨论】：