blocks|key|1527272|text|替换为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1527273|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
});|code-block|syntax|javascript|1527274|有了这个：|1527275|$('#cbCategory').val(cat);|1527276|在选择列表上调用val()将自动选择具有该值的选项(如果有)。|offset|length|style|CODE|1527277|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Attributes/val#val^0|0|0|0|0|8|5|8|5|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@$M|15|N|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Replace this:

<pre><code>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
});
</code></pre>

With this:

<pre><code>$('#cbCategory').val(cat);
</code></pre>

Calling <a href="http://docs.jquery.com/Attributes/val#val" rel="nofollow noreferrer"><code>val()</code></a> on a select list will automatically select the option with that value, if any.

blocks|key|1527347|text|如果您的<option>元素没有value属性，那么您可以只使用.val|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1527348|$selectElement.val("text_you're_looking_for")|code-block|syntax|javascript|1527349|但是，如果您的<option>元素有value属性，或者将来可能有这样的属性，那么这就行不通了，因为只要有可能，.val就会根据它的value属性而不是文本内容来选择一个选项。如果选项有value属性，没有内置的jQuery方法可以根据文本内容选择选项，所以我们必须用一个简单的插件自己添加一个：|1527350|/*
++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');
++++++++}
++++});
}|1527351|在将jQuery添加到页面后，只需在某个地方包含此插件，然后执行|1527352|jQuery('#someSelectElement').selectOptionWithText('Some+Target+Text');|1527353|选择选项。|1527354|该插件方法使用filter仅挑选出与targetText匹配的option，并使用.attr或.prop选择它，具体取决于jQuery版本(有关说明，请参阅.prop()+vs+.attr()+)。|1527355|这里有一个JSFiddle，您可以使用它来尝试这个问题的所有三个答案，它表明这个问题是唯一可靠工作的：http://jsfiddle.net/3cLm5/1/|1527356|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/val/#val2|1|http://api.jquery.com/filter/|2|https://stackoverflow.com/questions/5874652/prop-vs-attr|3|http://jsfiddle.net/3cLm5/1/^0|4|8|G|5|W|4|W|4|0|0|0|7|8|1K|4|1U|5|2L|5|0|0|0|0|0|7|6|V|6|15|5|1B|5|7|6|1|26|I|2|0|1F|S|3|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|F|3|G|5|H|7|1M|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1W|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1X|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1Y|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]|$9|27|A|28|B|C]]|D|@$9|29|A|2A|1|2B]|$9|2C|A|2D|1|2E]]|E|$]]|$1|W|3|X|5|6|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|Y|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|11|12|13|E|$14|19]]|1A|$5|11|12|13|E|$14|1B]]]]

If your <code>&lt;option&gt;</code> elements don't have <code>value</code> attributes, then you can just use <a href="http://api.jquery.com/val/#val2" rel="nofollow noreferrer"><code>.val</code></a>:

<pre><code>$selectElement.val("text_you're_looking_for")
</code></pre>

However, if your <code>&lt;option&gt;</code> elements have value attributes, or might do in future, then this won't work, because whenever possible <code>.val</code> will select an option by its <code>value</code> attribute instead of by its text content. There's no built-in jQuery method that will select an option by its text content if the options have <code>value</code> attributes, so we'll have to add one ourselves with a simple plugin:

<pre><code>/*
 Source: https://stackoverflow.com/a/16887276/1709587

 Usage instructions:

 Call

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

 to select the &lt;option&gt; element from within #mySelectElement whose text content
 is 'target_text' (or do nothing if no such &lt;option&gt; 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');
 }
 });
}
</code></pre>

Just include this plugin somewhere after you add jQuery onto the page, and then do

<pre><code>jQuery('#someSelectElement').selectOptionWithText('Some Target Text');
</code></pre>

to select options.

The plugin method uses <a href="http://api.jquery.com/filter/" rel="nofollow noreferrer"><code>filter</code></a> to pick out only the <code>option</code> matching the targetText, and selects it using either <code>.attr</code> or <code>.prop</code>, depending upon jQuery version (see <a href="https://stackoverflow.com/questions/5874652/prop-vs-attr">.prop() vs .attr()</a> for explanation).

Here's a JSFiddle you can use to play with all three answers given to this question, which demonstrates that this one is the only one to reliably work: <a href="http://jsfiddle.net/3cLm5/1/" rel="nofollow noreferrer">http://jsfiddle.net/3cLm5/1/</a>

I want to set a dropdown box to whatever has been passed through a querystring using jquery. 

How do I add the selected attribute to an option such that the "TEXT" value is equal to a certain param from the query string?

<pre><code> $(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
 });
 };
 });
</code></pre>

Selecting option by text content with jQuery

我想使用jquery设置一个下拉框来显示通过querystring传递的所有内容。如何将选中的属性添加到选项中，使"TEXT“值等于查询字符串中的某个参数？ $(document).ready(function() {        var cat = $.jqURL.get('category');        i...

问使用jQuery按文本内容选择选项
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery按文本内容选择选项EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery按文本内容选择选项
EN