Event handling of select change in jQuery doesn't return the current selectedIndex
<p>I'm trying to do the following: Show a drop down with jquery, which has a structure like:</p>

<ul>
<li>Add element</li>
<li>Element 1</li>
<li>Element 2</li>
</ul>

<p>Now, I would like to have the following behavior: The user looks at "Add element" and clicks it. He then selects one of the elements, some function gets called and then the drop down selection goes back to the title "Add element".</p>

<p>This is what I hoped would work:</p>

<pre><code>$('#elementselect').change(function(e) {            
  selectedIndex = $("#gadgetselect").attr('selectedIndex');

  if (selectedIndex != 0) {
    var selectmenu = document.getElementById("elementselect");
    chosenoption = selectmenu.options[selectedIndex];
    load_element(chosenoption.value);
    $("#elementselect").attr('selectedIndex', 0);
  }
});
</code></pre>

<p>If Element 1 is selected, .change is called and the load_element function is called. After setting the selectedIndex back to 0, the .change function is called again, however selectedIndex is still 1 there. So the load_element function gets called twice... Any ideas?</p>
