Bug Tracker

Modify

Ticket #7003 (closed bug: wontfix)

Opened 4 years ago

Last modified 2 years ago

Setting select list 'selected' attribute based on text, failing strangely

Reported by: snubian Owned by:
Priority: low Milestone: 1.4.3
Component: selector Version: 1.4.2
Keywords: select option text Cc:
Blocking: Blocked by:

Description

The goal is to set the 'selected' attribute of a select list based on the 'text' description rather than the 'value' index.

Using the following selector syntax:

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

This works when text1 is a multi-word phrase ('French toast') or contains non-alphabetic characters, but fails for simple words ('banana').

A simple example would be:

$(document).ready(function(){

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

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

});

<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>

In this example, which attempts to set the values of two select lists, it only works for the second list ('Mushroom pie') and fails for the first list ('Monkey'). Try putting a space in text1 ('Mon key') and in the <option>Mon key</option> and it suddenly works.

You can view a working demo here:

 http://jsfiddle.net/cnXGZ/

Reproduced in Chrome, Firefox and IE.

Change History

comment:1 Changed 4 years ago by addyosmani

  • Priority set to low
  • Status changed from new to closed
  • Resolution set to wontfix

I've coded up a few different workarounds for how this could be achieved:

 http://jsfiddle.net/cnXGZ/5/ (2 workarounds)  http://jsfiddle.net/cnXGZ/2/ ( a third)

Rather than using option[text=] as a part of your selector, you can iterate through the <select> element using this code which checks against text values for the one desired to be 'selected' (this can be done using both find or filter). Alternatively, using your original syntax, just including .find() as a part of the query would result in the correct behaviour.

That said, I think that some of the problems with the bug you submitted do have to do with the relationship of values and text in <select>. When a value isn't explicitly provided, the text becomes the value (and as you can see in the first of my workarounds). Using value-based selectors you are then able to set the value of the list to what you wish.

Closing as (in my opinion) this is more a browser quirk than an actual issue with the jQuery core.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.