jquery - Jquery 使用 Append() 或 html() 或 text() 移动 SelectBox

Question

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

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

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

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

谢谢！

Answer 1

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

此示例解决了您的问题。

Answer 2

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

破碎的例子：http: //jsfiddle.net/XnWyY/

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

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

Answer 3

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

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

Answer 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')失败（在这种情况下，它是对newDivdiv 的引用，它没有名为 的属性value）。

Answer 5

抱歉，我想我误解了现在修复代码的问题：

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

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