Question

103

jQuery: Setting select list 'selected' based on text, failing strangely

rated 0 times [ 104] [ 1] / answers: 1 / hits: 178659 / 14 Years ago, sat, september 4, 2010, 12:00:00

I have been using the following code (with jQuery v1.4.2) to set the 'selected' attribute of a select list based on its 'text' description rather than its 'value':

$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;

This code worked fine, until I noticed one select list on which it failed, depending on the text that was being matched. After some hair-pulling I realized that it was failing only in cases where the text was a single word (no spaces, no non-alpha characters). (All of my previous uses of this code had worked fine with select lists comprised solely of multi-word chemical names.)

For example, within the one select list, it worked fine with:

pharbitic acid

25-D-spirosta-3,5-diene

pogostol (#Pogostemon#)

It failed with:

glucose

adenine

I have tried any way I could think of to surround the text variable with quotes (both single and double) to no avail. (But why should a single word need quotes when a two word phrase does not?)

I have tried hard coding the text in there and had the same result.

This works:

$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');

This works:

$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');

This did not work:

$("#constituent option[text=adenine]").attr('selected', 'selected');

I tried hard coding quotes. This did not work:

$("#constituent option[text='glucose']").attr('selected', 'selected');

I could not get hard coded quotes (single or double) to work with any text at all.

It's worth noting that quotes are acceptable when using the 'value' attribute. E.g., both of these work fine:

$("#constituent option[value='3']").attr('selected', 'selected');



$("#constituent option[value=3]").attr('selected', 'selected');

Below is some code to demonstrate the problem. Two select lists, the first of which is comprised of simple words, the second of two word phrases. When the page loads it tries to set the value of each select list. The jQuery code works for the second list but not the first. (I tried putting a space in 'monkey' to get 'mon key' and it worked!)

A working demo of the code below is here.

I would greatly appreciate any insight into what I am doing wrong here. Or even an alternative selector syntax for using the 'text' attribute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 



<head>

    

  <script type="text/javascript" src="../js/jquery/jquery.js"></script>

    

  <script type="text/javascript">

    

  $(document).ready(function(){



    var text1 = 'Monkey';

    $("#mySelect1 option[text=" + text1 + "]").attr('selected', 'selected');

        

    var text2 = 'Mushroom pie';

    $("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');        

    

  });

    

  </script> 



</head>



<body>



  <select id="mySelect1">

    <option></option>

    <option>Banana</option>

    <option>Monkey</option>

    <option>Fritter</option>

  </select> 



  <select id="mySelect2">

    <option></option>

    <option>Cream cheese</option>

    <option>Mushroom pie</option>

    <option>French toast</option>

  </select> 



</body>



</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zariahdiamondz

Add To Favorites

Follow

Total Points: 649

Total Questions: 109

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

zariahdiamondz questions

1 Get esbuild to watch for changes, rebuild, and restart express server

Wed, Jul 13, 22, 00:00, 2 Years ago

1 ethers js exits with this error=> invalid BigNumber value (argument=value, value=undefined, code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Thu, Nov 4, 21, 00:00, 3 Years ago

1 react-data-table-component: access the selected row and assign it to setState

Tue, Jun 15, 21, 00:00, 3 Years ago

1 An argument for 'id' was not provided. angular 11

Tue, Apr 20, 21, 00:00, 3 Years ago

1 How to open offcanvas from offcanvas

Thu, Apr 8, 21, 00:00, 3 Years ago

View All

answered 14 Years ago jordenfabiand · Accepted Answer

When an <option> isn't given a value=, the text becomes its value, so you can just use .val() on the <select> to set by value, like this:

var text1 = 'Monkey';

$(#mySelect1).val(text1);



var text2 = 'Mushroom pie';

$(#mySelect2).val(text2);

You can test it out here, if the example is not what you're after and they actually have a value, use the <option> element's .text property to .filter(), like this:

var text1 = 'Monkey';

$(#mySelect1 option).filter(function() {

    return this.text == text1; 

}).attr('selected', true);



var text2 = 'Mushroom pie';

$(#mySelect2 option).filter(function() {

    return this.text == text2; 

}).attr('selected', true);

You can test that version here.