Question

我正在尝试在具有许多不同网格视图的aspx页面上使用此jquery插件（http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/）。页面代码位于asp：content标记内。我将我的选择选项放在asp：gridview之外的asp：view中。该页面使用母版页。我有一个多选小工具在一个空白页面中工作，但我不能让它与我的母版页一起工作。我已经尝试在我正在使用它的gridview中添加我的css / script links / document.ready（）。我尝试使用主服务器上的asp：contentplaceholder和我的aspx页面中的单独的asp：content标签将其添加到母版页的head标签中。我无法为我的生活获得多重选择以获取小部件的UI。

我注意到在包含工作小部件的空白页面上，jquery添加了一个按钮和几个跨度以及为多重选择设置样式所需的类。在我的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 /脚本引用，但这些引用无效。还有其他可能有冲突的东西吗？

Answer 1

你正在取消Control.ClientIDMode的胜利，即inherit：

选项1：

更改脚本以使用动态创建的ClientID：

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

选项2：

保持脚本不变，并将ClientIDMode更改为Static：

<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>

Answer 2

我正在以错误的顺序加载我的脚本。

jQuery UI Multiple选择不在.aspx页面中工作，该页面是母版页的内容

2 个答案: