jquery ui selecmenu add element

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);
      }

  }
});
}
....

Its not possible to use the above linked version of selectmenu with jQuery 1.4.x

The version linked in OP is not officialy released yet and works with the latest master (https://github.com/jquery/jquery-ui/tree/selectmenu) of jQuery UI. Its possible latest versions of the plugin wont work with 1.10.x too.

If you want to use selectmenu with an older release of jQuery / UI please use the legacy version in my private GitHub repo: https://github.com/fnagel/jquery-ui/tree/selectmenu

If you provide a demo fiddle I will take a look and add some working code.

Hint: just add the option to the original element and...

• call refresh method (for new version)
• call selectmenu() again (for legacy version)

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();

I experienced the same problem, but the solution didn't seem very elegant so I read the selectmenu wiki located on github (https://github.com/fnagel/jquery-ui/wiki/Selectmenu).

The wiki states:

Add / delete / modify options

It's possible to rename an option or even add one to the selectmenu. Simply change the original select element and apply selectmenu() to it:

$('select').selectmenu();

I tried this in my code and it worked correctly.

Why using the plugin?

You can simply achieve the same thing:

$("#foo").click(function(){
   $('#subcatselect').append("<option value='foo'>bar</option");       
});