Dynamically set the text of a select element, by its ID

Question

I have a select element, and two text boxes. When the user clicks a list option, the id and names (text) get populated in those two text boxes.

I want to be able to update the text portion of the select by the click of a button, making sure to update that of the id reflected in the text box. Here's what I've been working with:

HTML:

 <select name="categories" id="categories" multiple> <option value="1">Baby pictures</option> <option value="2">Animals</option> <option value="3">Nature</option> </select> <input type="text" name="catID" id="catID" /> <input type="text" name="selCat" id="selCat" /> <input type="button" id="update" value="update" />

jquery:

 $('#update').click(function() { var selID; var selCat; selID = $('#catID').val(); selCat = $('#selCat').val(); $('#categories').val(selID).text(selCat); })

I've tried several different things - this is the only one that actually has an effect on the list itself. Although, it completely empties it. heh

Any help would be appreciated.

Unless #categories is a form field, .val won't work. What are you using the "id" stuff for? I don't understand what that value is to be used for — helion3
– helion3, Commented Feb 12, 2014 at 0:13
when the update button is clicked do you want to add a new option to the select element — Arun P Johny
– Arun P Johny, Commented Feb 12, 2014 at 0:14
about to post HTML. No, I don't want a new option to be added - I want the option of ID [x] to be updated to whatever is in the textbox. — wribit
– wribit, Commented Feb 12, 2014 at 0:16

Arun P Johny · Accepted Answer · 2014-02-12 00:32:08Z

1

If you want to add a new option to the select element when click on the update button then try

$('#update').click(function () { var selID; var selCat; selID = $('#catID').val(); selCat = $('#selCat').val(); $('#categories').append($('<option />', { val: selID, text: selCat })); })

To Update an existing item

$('#update').click(function () { var selID = $('#catID').val(); var selCat = $('#selCat').val(); $('#categories option[value="' + selID + '"]').text(selCat) })

Demo: Fiddle

edited Feb 12, 2014 at 0:32

answered Feb 12, 2014 at 0:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wribit Over a year ago

I'm not looking to add a new option to the list, but to update an option. After selecting an option, the user can change the name of that option - clicking update should set that option in the list to its new name.

Arun P Johny Over a year ago

@wribit You want to change the text of an existing option whose value is specified in the value cat txtfield

wribit Over a year ago

I want to update the option whose value = the id in the catID textbox, and set it's option "i.e. baby pictures" to whatever is in the selCat textbox.

wribit Over a year ago

Perfect! thank you Arun, you've answered my question. :)

Collectives™ on Stack Overflow

Dynamically set the text of a select element, by its ID

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related