javascript - 如何正确创建水平方向的动态选择？

Question

我想select在水平块中动态地创建元素。并有有趣的结果。正确的方法是什么？

JSFiddle

Answer 1

您需要定义要附加新元素的位置。为此，使用.after(). 然后您需要在生成/修改的控制组上应用样式。

在这里演示：http: //jsfiddle.net/Palestinian/rKGtQ/

代码：

// 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');

控制组 div ID 是#test.

Answer 2

我认为主要问题是每次“推我！！” 按下按钮时，您将附加一个id属性为的选择元素sm。具有相同 id 的多个元素是无效的 HTML，可能会导致 Javascript 出现问题。看到这个问题。

即，该$("#sm")行不知道您要针对哪个选择。

也许你应该尝试这样的事情：

$("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();
});

此外，您应该摆脱onclick按钮的属性。你不需要它。将单击处理程序传递给click函数应该使函数在单击按钮时运行。

Answer 3

而不是使用 id 您应该使用 class 并仅在最后附加的选择元素上应用 selctmenu。检查这个小提琴

$("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();
})

更新小提琴

Answer 4

更改$("#sm").selectmenu();为$("select").selectmenu();

使用上述方法，无论您新推送的元素的 id 或类是什么，它都会应用样式。

在此处查看现场小提琴http://jsfiddle.net/mayooresan/VMj4U/6/