Selecting A List Option Using the Text Attribute via jQuery
Nov
25
Written by:
11/25/2009
Here is another blog by request. I blogged not too long ago about using jQuery to change the default option in a listbox. As a result, a comment was added that asked me how to change the selected option using only the text, and not the value. Here is the answer! Doing this is actually quite simple, but may not be straightforward at first.
In order to demo this, we need a listbox (select, combo box, drop down list, etc.). Here is the one I am using for my example:
<select id="cboList">
<option value="val1">Text1</option>
<option value="val2">Text2</option>
<option value="val3">Text3</option>
<option value="val4">Text4</option>
<option value="val5">Text5</option>
<option value="val6">Text6</option>
</select>
Just a simple drop down list, right? Right. Now, let’s use jQuery to select the default value that will show to your website visitors.
jQuery(document).ready(function() {
jQuery('#cboList option:contains(\'Text5\')').attr('selected', 'selected');
});
Just (technically) one line of jQuery to make this happen! Imagine doing that on your own using plain old JavaScript. Here it is in action!
Now you can try this on your own!
12 comment(s) so far...
Re: Selecting A List Option Using the Text Attribute via jQuery
Hi Will,
Here is a related function I use when dealing with select inputs. It is particularly useful when you do an inline addition via ajax and need to add the select item on the client with the id that was retreived from the server ajax call.
//ADD A SELECT OPTION AND SELECT IT
function AddSelectOption(field, key, text, selected) {
var html = "";
jQuery('#' + field).append(jQuery(html).attr("value", key).text(text));
}
By Mitch Labrador on
11/25/2009
|
Re: Selecting A List Option Using the Text Attribute via jQuery
I think some of my code got eaten by the addcomment function :), or I pasted it wrong so here is the missing piece.
before the jQuery('#' + field.... statement it should:
var html = "if (selected == true) html += " selected = 'selected'";
This will select the new option depending on the "selected" parameter.
By Mitch Labrador on
11/25/2009
|
Re: Selecting A List Option Using the Text Attribute via jQuery
Yes... The current iteration of the DNN blog module likes to eat up blog comments. :)
By Will on
11/25/2009
|
Re: Selecting A List Option Using the Text Attribute via jQuery
Brilliant! Thank you this helps a lot.
By Tracy on
1/19/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
@Tracy: I am always happy to help! :)
By Will on
1/19/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
What if I want to select an option element with the exact text "text". I would not be able to use :contains().
Here how I does at the moment;
$('#abc option').each(function(i, self) {
if($(self).text() === 'text') {
$(self).remove();
}
});
Is there any better solution?
By Erkie on
4/25/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
@Erkie: Why not?
By Will on
4/27/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
@Erkie, @Will
Erkie is right. You can't use this method to locate exact text.
Text
Text2
$("#cboList option:contains('Text')").css("display", "none"); //Applies to both Text and Text2
By PMC on
5/3/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
Hello, I have made this plugin that can search and select by text in a DropDownList:
// Find and select a option of a drop-down list by option text.
// Plugin 'findByOptionTextMG' - By Morten Gustafsson
jQuery.fn.findByOptionTextMG = function (data) {
$(this).find("option").each(function(){
if ($(this).text() == data)
$(this).attr("selected","selected");
});
};
// Use of plugin 'findByOptionTextMG'
$("#myDropDown").findByOptionTextMG(textToFind);
// var is used for serach for "Text"
var textToFind = "Text";
//html, the drop-down list
Select an option...
Text
Text1
Text2
Text3
By Morten Gustafsson on
5/26/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
Thanks Morten G., this helped me out.
By J Speirs on
6/10/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
How do you replace the '\Text5\' with a variable?
jQuery('#cboList option:contains(\'Text5\')').attr('selected', 'selected');
By r on
7/11/2011
|
Re: Selecting A List Option Using the Text Attribute via jQuery
@R: Once you have this reference:
jQuery('#cboList option:contains(\'Text5\')')
You can call a replace on the Text attribute.
var value = jQuery('#cboList option:contains(\'Text5\')').text();
value = value.replace('Text5', 'Your New Value');
jQuery('#cboList option:contains(\'Text5\')').text(value);
By Will on
7/11/2011
|