首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Eric Hynds jQuery UI多选小工具:复选框宽度等于每个项目的文本宽度

Eric Hynds jQuery UI多选小工具:复选框宽度等于每个项目的文本宽度
EN

Stack Overflow用户
提问于 2012-08-24 05:27:14
回答 1查看 1.2K关注 0票数 0

我使用Eric Hynds的Multiple Select Widget,但是复选框的宽度与文本的宽度有问题。以下是我的代码:

包含的文件列表

代码语言:javascript
运行
复制
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<link href="../../Content/jquery.multiselect.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.common.js" type="text/javascript"></script>
<script src="../../Scripts/grid.formedit.js" type="text/javascript"></script>
<script src="../../Scripts/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/jqDnR.js" type="text/javascript"></script>

<script src="../../Scripts/dropmenu.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.multiselect.js" type="text/javascript"></script>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Common.js" type="text/javascript"></script>

控件的HTML:

代码语言:javascript
运行
复制
<select id="SchemaName" multiple="multiple"></select>

填充控件的代码。我使用AJAX调用,因为数据来自数据库。我在stackoverflow上的一个示例中找到了这段代码。

代码语言:javascript
运行
复制
var $SchemaName_multiselect = jQuery('select#SchemaName').multiselect();
$SchemaName_multiselect.multiselect({ selectedList: 1 });

jQuery.ajax({
    type: "GET",
    url: "/Controller/Action",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function OnPopulateControl(data, response) {
        if (data.length > 0) {
            jQuery.each(data, function () {
                jQuery('select#SchemaName').append(jQuery("<option></option>").val(this['Value']).html(this['Text']));
            });
        } else {
            jQuery("select#SchemaName").empty().append('<option selected="selected" value="0">Not available<option>');
        }
        jQuery("select#SchemaName").multiselect('refresh');

        jQuery('select#SchemaName').unbind('multiselectclick').bind('multiselectclick', function (event, ui) {

            //ToDo: when the selection has changed.

            }

        });

    },
    error: function (data, response) {
        alert('Error: ' + response);
    }
});

截图如下:

EN

回答 1

Stack Overflow用户

发布于 2012-10-02 09:19:14

你有没有试过在代码中替换:

代码语言:javascript
运行
复制
      jQuery('select#SchemaName').append(jQuery("<option value=". val(this['Value']). "  selected='selected'>" .html(this['Text']) . "</option> ");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12100232

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档