Question

我有一个html drop down as follwos

<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"});

但它不起作用。任何人都可以帮我找到错误吗？

Answer 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 + '"]将选择具有<option>属性值的name元素作为给定值。然后可以使用selected设置prop()属性。

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>

如果您具有选项文本和值的映射，则可以使用值将该选项选为

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

Answer 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()

Answer 3

请使用以下选择器（CSS 3 style），请查看jQuery documentation：

E[foo="bar"] 含义：一个E元素，其中＆＃34; foo＆＃34;属性值恰好等于＆＃34; bar＆＃34;。

在你的情况下，使用＆＃34; name＆＃34;获取元素#subcategory;属性值恰好等于＆＃34; CBC＆＃34;和更改是选定的属性。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

虽然可以使用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

Answer 5

你可以像这样使用。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用jquery更改所选项？

5 个答案: