we can do this at first:
Case 1: No
Case 2:
DON'T use
DON'T give all your
DON'T use the jQuery
DON'T use
$("#simple_search_bar .cat option[value=0]").prop('selected',true);and there is an article talke about this:
The right way to do this depends upon your circumstances.
Case 1: No value
attributes on the option
elements
If your
option
elements don't have value
attributes (and you're not worried about the possibility of somebody adding them later and inadvertently breaking your existing code), then just use the .val()
method of the jQuery object wrapping your select
element.
For instance, in the OP's case...
$select = $('#cbCategory');
$select.val(cat); // Selects the option with text `cat`, as long as the options don't have
// 'value' attributes.
Case 2: Option
elements have value
attributes
If your
option
elements have value attributes (or value
attributes might be added in the future and you don't want your code to break), then there's no method built into jQuery to select options by text. In that case, use this function, or take what you need from the code:/*
Selects the
function selectOptionByText(selectElement, targetText) {
var $selectElement, $options, $targetOption;
$selectElement = jQuery(selectElement);
$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 (jQuery().prop) {
$targetOption.prop('selected', true);
}
else {
$targetOption.attr('selected', 'true');
}
}
Here we use
filter
to pick out only the option
matching the targetText, and select it using either.attr
or .prop
, depending upon jQuery version (see .prop() vs .attr() for explanation).How not to do this
There are a few approaches to selecting options by their text content that I've seen suggested on StackOverflow or elsewhere that you probably shouldn't follow, unless you have a really good reason and know what you're doing. Here they are, together with why they're bad ideas.
DON'T use .val()
to select options by their text content if any of the options have value
attributes.
Using
.val
is suggested in the currently accepted answer to this question (at the moment that I'm writing), but on modern jQuery it only works if your option
elements have no value
attributes, as noted above. Using .val
to select options by their text content when they had value attributes worked prior to jQuery version 1.4, but was considered a bug at that time and has since been fixed. (Here is the commit that made the change.)
DON'T give all your option
elements value
attributes equal to their text content and thenuse .val()
I've sometimes seen HTML where
option
elements in select
s were all given value
attributes equal to their text content. This is usually pointless; the value
property of the option element will be equal to its text content if you don't specify a value
attribute, and you can use .val
on a jQuery select
element to select option
s by text without giving them value attributes. If you don't need value attributes that are distinct from the text content of the option, it's simpler (and in some scenarios, like hand-written HTML, less error-prone) to not have value attributes at all, rather than duplicating content.
DON'T use the jQuery :contains
selector instead of a .filter()
call
:contains(someText)
matches any elements of which someText
is a substring, but here what we need is an exact text match. Even if :contains
would be sufficient for a particular case (because nooption
's text is a substring of another's in your particular select
element), I would advise against using it. If you do so, you're needlessly writing code that is less explicit, harder to extract into a reusable function, and can break if you change your content.
评论
发表评论