Change selected text when selected


How do you change the selected text in a select box using jQuery?

<select> <optgroup label="Name"> <option>John</option> <option>Mike</option> </optgroup> </select>

ie, when you select John. The select box would show, "Name: John". Instead, of just "John".



<select id="myselect"> <optgroup label="Name"> <option>John</option> <option>Mike</option> </optgroup> </select>


$("#myselect").change(function (event) { var o = $("#myselect option:selected") , v=o.text() , old = $("#myselect option:contains('name')") , oldv = old.html(); oldv && old.html(oldv.replace('name: ','')); o.text('name: ' + v); });

see: <a href="http://jsfiddle.net/eQR2W/2/" rel="nofollow">http://jsfiddle.net/eQR2W/2/</a>


Try this:

$(document).ready(function() { $('#name-select').change(function() { var selectedItem = $('#name-select option:selected'); var oldValue = selectedItem.text(); var newValue = 'Name: ' + oldValue; selectedItem.text(newValue); }); });

You would need to update your select option to give it an ID though:

<select id="name-select"> <optgroup label="Name"> <option>John</option> <option>Mike</option> </optgroup> </select>

And here's the jsFiddle demo: <a href="http://jsfiddle.net/benmajor/2m76z/" rel="nofollow">http://jsfiddle.net/benmajor/2m76z/</a>


If you add a value attribute to the option you could use something like this (and you need to add a value attribute otherwise you will loose the value if someone selects a value and then selects another value).

$("select").change(function () { var label = $("select option:selected").parent().attr("label"); var val = $("select option:selected").attr("value"); $("select option:selected").html(label+":"+val); });


  • How to retain selected value in a dropdown list in the same jsp page? [duplicate]
  • How to Call for After Validating A Form
  • Julia pmap speed - parallel processing - dynamic programming
  • Selectbox hide first option entry on dropdown?
  • Nested list to dict with count groups
  • clear html select option group
  • xquery to return the element name
  • How to add multiple columns in Apache Spark
  • Android NDK vs iOS - performance issue [closed]
  • Can someone please explain to me in the most layman terms how to use EventArgs?
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • javascript inside java/jsp code
  • Sending data from AppleScript to FileMaker records
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • Linker errors when using intrinsic function via function pointer
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How to set the response of a form post action to a iframe source?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How to stop GridView from loading again when I press back button?
  • Authorize attributes not working in MVC 4
  • python draw pie shapes with colour filled
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • EntityFramework adding new object to nested object collection
  • JaxB to read class hierarchy
  • Running Map reduces the dimensions of the matrices
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?