Updating a select option using jQuery

Question

I have a form where when something is updated, I need to change the name of that item in a select input. I'm using this to loop through the options, but I'm having trouble figuring out how to change the text value. Here is what I tried

$('#GroupID option').each(function () {
                    if ($(this).val() == currently_editing_group_id)
                        $(this).attr('text', $('#NewGroupName').val());
                });

Here is the select input

<select id="PracticeGroupID" name="GroupID">
      <option value="5">Test Group 1</option>
      <option value="6">Test Group 2</option>

Answer 1

You can use the base DOM properties .text and .value of the <option> element, like this:

$('#PracticeGroupID option').each(function () {
  if (this.value == currently_editing_group_id)
    this.text = $('#NewGroupName').val();
});

Or in the selector:

$("#PracticeGroupID option[value='"+currently_editing_group_id+"']").each(function () {
  this.text = $('#NewGroupName').val();
});

Note that you want #PracticeGroupID for your selector, since # is for the id and not the name.

Answer 2

If you want to perform and action when the value of the select changes, you should bind your function to the change even like this:

HTML

<select id="PracticeGroupID" name="GroupID">
    <option value="5">Test Group 1</option>
    <option value="6">Test Group 2</option>
</select>

<input type="text" id="updateMe" value="" />

JavaScript

$('#PracticeGroupID').change(function() {
    $('#updateMe').val('PracticeGroupID is ' + $(this).val());    
}).change();

You can try ti live here: http://jsfiddle.net/bTYWe/