How correct create dynamiclly select with horizontal orientation?

Question

I want danamically create select element in horizontal block. And have funny result. What is the correct way?

JSFiddle

Answer 1

You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.

Demo here: http://jsfiddle.net/Palestinian/rKGtQ/

Code:

// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');

// apply styles on select menu
$("#sm").selectmenu();

// add options to controlgroup 
$( "#test" ).controlgroup( "option", "corners", true );

// create controlgroup
$( "#test" ).controlgroup().trigger('create');

controlgroup div ID is #test.

Answer 2

I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.

Namely, the $("#sm") line doesn't know which select you are trying to target.

Maybe you should try something like this:

$("button").click(function () {
    $("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
    $("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});

Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.

Answer 3

Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle

$("button").click(function show_filters() {
//alert("Hello");
    $("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
    $(".sm:last").selectmenu();
})

Updated Fiddle

Answer 4

change the $("#sm").selectmenu(); to $("select").selectmenu();

With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.

Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/