Jquery Moving SelectBox with Append() or html() or text()

Question

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

$(function () {
    $('.NewDiv').click(function () {
        $(this).append($('#MySelectBox'));
        $('#MySelectBox').val($(this).attr('value'));
    });
});
<select id="MySelectBox>
    <option...
</select>

我尝试使用追加，html和文本，所有这些都呈现了选择框，但它在Chrome和Firefox上无法正常工作。

谢谢！

Answer 1

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

此示例可修复您的问题。

Answer 2

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

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

也许这就是您要查找的内容（单击以在div后移动select，附加新option）：http://jsfiddle.net/XnWyY/1/

或单击以显示，附加新option：http://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') 失败（在这种情况下，它是对div newDiv的引用，它没有名为 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/