Edit an option of a select menu using jQuery

How to edit an individual option of a select menu using jQuery

I have read many articles that cover how to use jQuery to add and remove options from a select box but I couldn't find one that covered how to edit an individual option.

I knew there had to be a way and the good people of Stack Overflow were able to answer my question.

Essentially what you need to do is use the option selector in order to grab the element you want, then it is fairly trivial.

$('#selectID option[value="knownValue"]').text('New Option Text');

So what we are saying here is for every element with the ID of 'selectID' look for an option with the value of 'knownValue'.

Change the text of that option to 'New Option Text'.

A use case for this (and indeed the reason why I was looking it up) is that if you have a collection of objects and you want to edit them dynamically by selecting them via dropdown then edit the fields you will most likely want to edit the 'name' field or some other field that represents the unique name which appears in the dropdown list.

If this is the case when you edit your name and hit save, assuming it is all done using ajax the value in the dropdown will no longer equate to the value stored in the database. This is a usability concern so you should use the method above to ensure that the option text of the dropdown gets edited accordingly.


Recent posts View all

Ruby

How to ignore Bullet in RSpec tests

Using Bullet during a test can pick up mistakes but also has false negatives; here is an easy way to ignore them

Ruby

How we used Nokogiri to fix a sizing issue in YouTube's oEmbed

At some point, one of our calls to YouTube's oEmbed endpoint was returning videos way too small; we fixed in in our Rails application by using Nokogiri