jQuery UI多選不工作在.aspx頁面，是一個母版頁的內容

Question

我想在一個帶有許多不同gridview的aspx頁面上使用這個jquery插件（http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/）。頁面代碼位於asp：content標籤內。我將選擇選項放置在asp：gridview之外的asp：視圖中。該頁面使用母版頁。我有一個在空白頁面上工作的multiselect小部件，但是我無法讓它與我的母版頁一起工作。我試過在我使用的gridview中添加我的css /腳本鏈接/ document.ready（）。我已經嘗試將它添加到master頁面的head標籤，並在主頁上使用asp：contentplaceholder，並在我的aspx頁面中使用單獨的asp：content標籤。我不能爲了我的生活而讓多選選項採用小部件的用戶界面。

我注意到在工作窗口小部件的空白頁面上，jquery添加了一個按鈕和幾個跨越需要樣式的multiselect類。在我的aspx頁面中，這些項目不會被添加。

<button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" 
aria-haspopup="true" style="width: 240.60000002384186px;"> 
<span class="ui-icon ui-icon-triangle-2-n-s"></span><span>5 selected</span></button> 


//My Code 
<link rel="Stylesheet" type="text/css" href="../Styles/jquery-ui-1.9.1.custom.min.css" /> 
<link rel="stylesheet" href="../Styles/jquery.multiselect.css" type="text/css" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.multiselect.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#example").multiselect({ 
      minWidth: 235 
     }); 
     $("#example").multiselect("checkAll"); 
    }); 
</script> 

<select id="example" name="example" multiple="multiple"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
</select> 

我試圖消除在母版頁的所有其他的CSS /腳本引用，並沒有奏效。還有其他可能相沖突的東西嗎？的Control.ClientIDMode

Answer 1

我裝我的腳本錯誤的順序。

Answer 2

您正在下降victom，這是inherit：

選項1：

更改腳本，以使用動態創建的客戶端ID：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var sel = #<%= example.ClientID %>"; 
     $(sel).multiselect({ 
      minWidth: 235 
     }); 
     $(sel).multiselect("checkAll"); 
    }); 
</script> 

選項2：

給你留下你腳本是，改變的ClientIDMode爲靜態：

<select id="example" name="example" multiple="multiple" ClientIDMode="Static"> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
</select>