2

我不知道我是否错误地使用了 .after 但我的理解是它应该在我指定的元素之后显示元素？- Option1 选择后的 hello world 选择框？

<select id="cselect" >
<option value="Option 1">Option 1</option>

</select>

$('#cselect').chosen();

var test = '<select id="dselect" ><option>Hello World</option></select>';  

$('#cselect').after(test);

$('#dselect').chosen();

在这里小提琴 - http://jsfiddle.net/jHvmg/4/

我错过了什么？TIA

4

3 回答 3

2

它与选择的插件有关。当你第一次调用chosenfirstselect时，你会得到这个（伪代码）：

<select id="select1"></select>
<div id="chosenForSelect1"></div>

追加 new 后select，您将拥有：

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect1"></div>

然后你调用.chosen()第二个select并最终得到这个：

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect2"></div>
<div id="chosenForSelect1"></div>

所以实际select元素是在第一个元素之后添加的，但是div支持所选插件的 s 不正常。最好将新的附加select到容器中，为每个添加一个容器select，或者在所选插件的 html 之后附加。

于 2013-09-11T18:05:29.090 回答
2

.after()在匹配元素集中的每个元素之后插入由参数指定的内容。您正在以正确的方式使用它。检查使用上述代码创建的 DOM 顺序。您可以看到body标签内的第一个 HTML 元素是：

<select id="cselect" style="display: none;">
    <option value="Option 1">Option 1</option>
</select>

第二个是：

<select id="dselect" style="display: none;"><option>Hello World</option></select>

由于选择是div's动态创建的，因此顺序会更改。

解决方案：一旦您使用 .after 将动态 html 代码添加到 DOM，就选择了 select，例如：

var test = '<select id="dselect" ><option>Hello World</option</select>';  

$('#cselect').after(test);
 $('#cselect').chosen();
$('#dselect').chosen();

DEMO FIDDLE

于 2013-09-11T18:08:14.927 回答
1

如果您查看插件生成的 HTML，它实际上隐藏了选择并在其后添加了一个 div，这是实际呈现的选择。

所以你最终得到的实际上是：

<select id="cselect" style="display: none;">
    <option value="Option 1">Option 1</option>
</select>
<select id="dselect" style="display: none;">
    <option>Hello World</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 94px;" title="" id="dselect_chosen"> ... </div>
<div class="chosen-container chosen-container-single" style="width: 76px;" title="" id="cselect_chosen"> ... </div>

实际上，您最终会在 cselect 之前插入 dselect。

于 2013-09-11T18:10:46.007 回答