Question

I have:

<select name="TopicID" id="TopicID">
  <option value="00">XX</option>
  <option value="02">YY</option>
</select>

How can I make it so that when a user selects a new value such as “YY” that the title of the select gets updated like this:

<select title="YY" name="TopicID" id="TopicID">
  <option value="00">XX</option>
  <option value="02">YY</option>
</select>

Answer 1

You can bind to the change event and update the title attribute:

$("select").change(function() {
    $(this).attr("title", $("option:selected", this).text());
});

Note that the code above uses attr() instead of prop() to emphasize we’re creating or updating an HTML attribute rather than a DOM property. That is only a matter of preference, using prop() would result in the same behavior.