通过jQuery文本内容选择选项

我想设置一个下拉框，通过使用jquery通过querystring传递的任何内容。通过jQuery文本内容选择选项

如何将选定的属性添加到选项中，使“TEXT”值等于查询字符串中的某个参数？

$(document).ready(function() { 
     var cat = $.jqURL.get('category'); 
     if (cat != null) { 
      cat = $.URLDecode(cat); 
      var $dd = $('#cbCategory'); 
      var $options = $('option', $dd); 
      $options.each(function() { 
       if ($(this).text() == cat) 
        $(this).select(); // This is where my problem is 
      }); 
     }; 
    });

来源

2009-06-17 OneSmartGuy

可能重复 - 设置的选定值选择控制通过它的文字描述]（http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description） – 2013-07-01 21:44:46

171

替换此：

var cat = $.jqURL.get('category'); 
var $dd = $('#cbCategory'); 
var $options = $('option', $dd); 
$options.each(function() { 
if ($(this).text() == cat) 
    $(this).select(); // This is where my problem is 
});

有了这个：

$('#cbCategory').val(cat);

选择列表上调用val()将自动选择与该值的选项，如果有的话。

来源

2009-06-17 22:01:48

不能用这种方法选择多个选项？ – 2012-10-19 21:14:21

此方法不会触发$（'＃cbCategory'）元素上的事件。 – 2012-10-22 10:48:42

我知道这个问题是太旧了，不过，我觉得这个方法是清洁剂：

cat = $.URLDecode(cat); 
$('#cbCategory option:contains("' + cat + '")').prop('selected', true);

在这种情况下，你不会需要去在整个方案与each()。虽然那个时候prop()没有为旧版本的jQuery的存在，因此使用attr()。

UPDATE

你必须使用contains时候，因为你可以找到多个选项，在字符串的情况下，内部cat比你打算匹配一个不同选项的子字符串匹配是肯定的。

那么你应该使用：

cat = $.URLDecode(cat); 
$('#cbCategory option') 
    .filter(function(index) { return $(this).text() === cat; }) 
    .prop('selected', true);

来源

2012-11-30 11:43:22

如果您<option>元素没有value属性，那么你可以使用.val：

$selectElement.val("text_you're_looking_for")

但是，如果你<option>元素具有价值属性，或在将来可能会做，那么这将无法工作，因为只要有可能.val将其value属性，而不是通过选择一个选项，它的文本内容。有没有内置的jQuery的方法，如果选择有value属性，将选择其文本内容的选项，所以我们需要增加一个我们用一个简单的插件：

/* 
    Source: https://stackoverflow.com/a/16887276/1709587 

    Usage instructions: 

    Call 

     jQuery('#mySelectElement').selectOptionWithText('target_text'); 

    to select the <option> element from within #mySelectElement whose text content 
    is 'target_text' (or do nothing if no such <option> element exists). 
*/ 
jQuery.fn.selectOptionWithText = function selectOptionWithText(targetText) { 
    return this.each(function() { 
     var $selectElement, $options, $targetOption; 

     $selectElement = jQuery(this); 
     $options = $selectElement.find('option'); 
     $targetOption = $options.filter(
      function() {return jQuery(this).text() == targetText} 
     ); 

     // We use `.prop` if it's available (which it should be for any jQuery 
     // versions above and including 1.6), and fall back on `.attr` (which 
     // was used for changing DOM properties in pre-1.6) otherwise. 
     if ($targetOption.prop) { 
      $targetOption.prop('selected', true); 
     } 
     else { 
      $targetOption.attr('selected', 'true'); 
     } 
    }); 
}

就包括这个插件后某处你添加jQuery到页面上，然后做

jQuery('#someSelectElement').selectOptionWithText('Some Target Text');

来选择选项。

插件方法使用filter挑选出仅option匹配targetText，并使用任一.attr.prop或取决于jQuery的版本选择它（参见.prop() vs .attr()用于解释）。

这里有一个的jsfiddle你可以用给定了这个问题，这表明这个人是可靠地工作的唯一一个所有三个答案玩：jQuery的的http://jsfiddle.net/3cLm5/1/

来源

2013-06-02 21:01:06

通过jQuery文本内容选择选项

回答

相关问题