Question

I have a select that looks like this:

<select id="select-site" title="????">
   <optgroup label="City">
      <option title="ee" value="1">123</option>
      <option title="cc" value="2">456</option>
      <option title="dd " value="3">789</option>
      <option title="xx" selected="selected" value="4">aa</option>
   </optgroup>
</select>

How can I make it so that after the document has loaded the title of the select which is ???? is changed to the title of the selected option. Also how can I make it so that when I change the selected option the title of the <select> is updated again.

Answer 1

try this for complete solution

$(document).ready(function() {
    $('#select-site').change(function() {
        $(this).attr('title', $(this).find('option:selected').attr('title'));
    });
    $('#select-site').trigger('change');
});​