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”，因为它没有读取任何值。

This example解决了您的问题。

Answer 2

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

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

也许这就是您要找的内容（点按select后div移动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')失败（在这种情况下，它是newDiv div的引用，它没有名为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/

Jquery移动选择框与附加（）或html（）或文本（）

5 个答案: