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

回答

相關問題