0

我试过了jQuery select2 

http://ivaynberg.github.io/select2/

它正在按预期工作。

但是，我的选择有 700 多个选项，我不想在用户希望使用选择框之前加载它们。

所以，我试图仅在用户单击按钮时显示选择框。

<html> 
    <head>
        <title>jQuery Load of Script</title>
    </head>
<body>
    <div id="showselect">
        <button onclick="showselect()">select category</button>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>
        function showselect() { 
            document.getElementById('showselect').innerHTML='loading...';
            $('#showselect').load('select1.htm');
            $.getScript("select2.js");
            $(".chzn").select2({width:230});
        }
    </script>
</body>
</html>

select1.htm包含 css 样式以及选择表单 html 代码：

http://likeforums.com/select1.htm

select2.js取自 select2 脚本，它在这里：

http://likeforums.com/select2.js

结果在这里：

http://likeforums.com/test-select3.htm

单击按钮时，它只显示选择框并且select2不起作用。

请帮忙。

谢谢

4

2 回答 2

0

无需加载它隐藏它document.ready并显示它button click

$(document).ready(function(){   
    $("#listid").hide();
    $("#buttonid").click(function(){    
        $("#listid").show();
    });
});

之后编写 jquery 以在选择列表中显示数据，您需要在单击事件中编写 jquery for list

$("#listid").click(function(){
    //Write code to bind the data 
});
于 2013-04-09T10:18:23.723 回答
0

这里有个建议，select2()脚本成功加载执行后调用。所以放

$(".chzn").select2({width:230});

在getScript()函数的回调中：

function showselect() { 
    document.getElementById('showselect').innerHTML='loading...';
    $('#showselect').load('select1.htm');
    $.getScript("select2.js",function() {
       $(".chzn").select2({width:230});
   });
}

这是文档getScript()。

享受...

于 2013-04-09T10:24:56.393 回答