jQuery的选择2和Ajax

我已经试过jQueryselect2jQuery的选择2和Ajax

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从选择2脚本拍摄，它是在这里：

http://likeforums.com/select2.js

结果是这里：

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

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

请帮忙。

感谢

来源

2013-04-09 Arnold

脚本成功加载并执行后调用'select2（）'。检查下面的答案。 – 2013-04-09 10:43:47

这里有一个建议，请拨打select2()后脚本为s成功加载并执行。所以把

$(".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-09 10:24:56

非常感谢。有效。 – Arnold 2013-04-10 09:01:20

无需加载它隐藏在document.ready，并显示在buttonclick

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

的写的jQuery后

，以显示在选择列表中的数据，你需要写的jQuery在点击事件列表

$("#listid").click(function(){ 
    //Write code to bind the data 
});

来源

2013-04-09 10:18:23 abiansh

感谢您的回复。自第一份答复起作用以来，我没有尝试过你的建议。抱歉! – Arnold 2013-04-10 09:03:06

jQuery的选择2和Ajax

回答

相关问题