Jquery 使用 Append() 或 html() 或 text() 移动 SelectBox答案

【问题标题】：Jquery Moving SelectBox with Append() or html() or text()Jquery 使用 Append() 或 html() 或 text() 移动 SelectBox
【发布时间】：2012-09-18 06:44:30
【问题描述】：

我在一个隐藏的 div 下有一个选择框，我做了一个功能，当我在某个地方单击时，选择框会出现正确的选项，但它不能很好地呈现，控件无法正常工作，这是代码：

$(function () {
    $('.NewDiv').click(function () {
        $(this).append($('#MySelectBox'));
        $('#MySelectBox').val($(this).attr('value'));
    });
});

<select id="MySelectBox>
    <option...
</select>

我尝试了 append、html 和 text，它们都呈现了选择框，但在 Chrome 和 Firefox 上证明它不能正常工作。

谢谢！

【问题讨论】：

你能给出确切的代码和它是如何不工作的例子吗？
你可以在这里测试jsfiddle.net/XnWyY/3（移动后尝试选择一个选项）

标签： jquery html text append drop-down-menu

【解决方案1】：

您看到此问题的原因是您将事件绑定到 div，即现在包含选择框的 div。因此，当您选择一个选项时，它会将选项更改为“0”，因为它没有读取任何值。

This example 解决了您的问题。

【讨论】：

@Korvin Szanto 抱歉，我误解了这个问题。您的解决方案是正确的 +1

【解决方案2】：

我看到的一个问题是您当前的代码将select 放入div，因此select 上的任何点击事件都会导致操作重复。

破例：http://jsfiddle.net/XnWyY/

也许这就是你要找的（点击移动select在div之后，追加新的option）：http://jsfiddle.net/XnWyY/1/

或者点击显示，追加新的option:http://jsfiddle.net/XnWyY/2/

【讨论】：

您可以在第一个示例中看到问题，如果您在移动组合框之前单击它可以正常工作，但是如果您移动组合然后单击它，它会改变您的行为。在这里移动组合框后尝试点击“战斗机”jsfiddle.net/XnWyY/3

【解决方案3】：

用下面的代码改变你的行。

$(this).append($('#MySelectBox').html());

【讨论】：

如果 OP 想要多次添加它，这很好。我怀疑他只是想让它可见一次......

【解决方案4】：

隐藏 div 可能更简单，然后在单击触发器后显示（）它。相关代码在http://jsfiddle.net/L67LT/1/

$('#MySelectBox').hide();
var externalValue="Fighter";
$(function () {
    $('#newDiv').click(function () {
        console.log("clicked!");
        var box = $('#MySelectBox');
        box.show(); box.val(externalValue);
    });
});

还要注意，使用 $(this).attr('value') 失败（在这种情况下，它是对 newDiv div 的引用，它没有名为 value 的属性）。

【讨论】：

【解决方案5】：

对不起，我想我误解了现在修复代码的问题：

$('#newDiv').click(function () {
    $(this).append($('#MySelectBox'));
    $('#MySelectBox').val($(this).attr('value'));
    $('#MySelectBox').bind("click", function(e) {
        e.stopPropagation();
    });
});

小提琴： http://jsfiddle.net/hghNJ/1/

【讨论】：