1

我正在尝试在具有许多不同网格视图的 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/脚本引用，但没有奏效。是否还有其他可能相互冲突的内容？

4

2 回答 2

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 更改为静态： 

<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>
于 2013-01-18T21:33:34.853 回答
0

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

于 2013-01-21T17:01:23.577 回答