Question

Im trying the jquery ui selecmenu, described here:
http://wiki.jqueryui.com/w/page/12138056/Selectmenu

I’m using verion 1.4.2 of jQuery.

Im rendering select boxes as described in the demos.

My question is: how do I add en element to a select box after it is rendered? When I run my code and ad an option element to the select, it adds a new one to the select box… but it doesnt show on the page, i.e the surrounding markup is not added.

How can I make the change appear on the page?

Here’s some code:

head section:

 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery-ui-1.8.6.custom.min.js"></script>
 <script type="text/javascript" src="/js/ui.selectmenu.js"></script>
 ....

<select class="custom" id="subcatselect" name="subcategory">
    <option value=''>header</option>
    <option value="yy">yy</option>
    <option value="xx">xx</option>
 </select>

 <a href="#" id="foo">add element</a>

My document ready handler:

$("#foo").click(function(){
   $('#subcatselect').addNode('FOO','BAR');       
});

The addNode function is loaded from another file:

(function($) {

$.fn.addNode = function(text, value) {
return this.each(function(){
  if (this.tagName=='SELECT') {
    var selectElement = this;

var option = new Option(text, value);
      if ($.browser.msie) {
        selectElement.add(option);
      }
      else {
        selectElement.add(option,null);
      }

  }
});
}
....

Answer 1

You can see a solution in this thread, by Lorenzo..
select next option in jquery selectmenu

i.e this type of code:

$("#myselect").selectmenu('disable'); 
$('#mycatselect').html('');
$('#mycatselect').append($("<option></option>").attr("value", "foo").text('bar'));
$("#myselect").selectmenu('destroy').selectmenu();