javascript - jquery 插件 - 选择 - 多项选择不是在行中列出而是在列中列出

标签 javascript jquery-plugins jquery-chosen

我正在尝试配置我的列表框以使用 jquery 插件,选择 1.4。

我从数据库获取列表框的值,并将每个项目添加到后面代码中的列表框,效果很好:

 //Populate the Recipient ListBox 
 DataTable tdtRecipients = new DataTable();
 tstrXmlTableData = m_pagingClient.GetRecipientList(m_strUserID);
 tdtRecipients = ParseXML(tstrXmlTableData);

  // string tstrRecipientLst = string.Empty;
  foreach (DataRow row in tdtRecipients.Rows)
  {
       lstBoxTo.Items.Add(row["Name"].ToString());                      
   }

列表框的样式很长,并在需要时添加垂直滚动条。这是来自样式表:

 #lstBoxTo
{
    width: 620px;
    height: 40px;
    overflow: scroll;
}

该控件设置在面板内:

 <asp:Panel ID="pnlTo" runat="server" CssClass="basicRow" ClientIDMode="Static">
     <asp:Label ID="lblTo" runat="server"  CssClass="labelText" Text="To: " 
                ClientIDMode="Static"></asp:Label>
     <asp:ListBox ID="lstBoxTo" runat="server" SelectionMode="Multiple"  
                ClientIDMode="Static" ></asp:ListBox>
     </asp:Panel>

这是使用和配置所选插件的 JavaScript:

<script type="text/javascript">
    $(window).load(function () {
      $("#lstBoxTo").data("placeholder", "Choose recipient(s)...").chosen();
    });
</script>

列表框的显示宽度并不像样式表指示的那么宽,而只是与最长的选择一样宽。该列表采用项目符号格式,当您进行多个选择时,它们不是在一行中,而是在一个项目符号列中。未显示占位符“选择收件人”,但显示默认占位符“选择选项”。

我希望列表框显示在网站上,http://harvesthq.github.io/chosen/ , 用于多项选择。但我不知道要设置哪些选项或如何设置它们。

任何帮助将不胜感激。

谢谢。 更新 删除 ClientIDMode 属性并向属性添加 Height 和 width 后,ListBox 将正确显示。 但在演示中,列表框应以“选择收件人”开头,并在您键入时显示如下列表。该列表显示在列表框中。

最佳答案

我明白了... 我缺少所选的样式表。 添加:
到我的 Site.Master 文件,它工作正常。

希望这对像我这样的新手有帮助!!

关于javascript - jquery 插件 - 选择 - 多项选择不是在行中列出而是在列中列出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28973731/

相关文章:

javascript - 在多选 asp 列表框中设置所选项目(使用 jQuery 插件-Chosen )

javascript - jQuery 选择将事件绑定(bind)到键盘

javascript - 如何使用 setTimeout 和 clearTimeout 在 JS 中重新启动递归函数?

javascript - 在reactjs CK编辑器5的工具栏中添加一个新按钮

javascript - 过滤对象数组 - 几个条件

javascript - 页面闲置一段时间后,为什么没有数据传给客户端?

javascript - 如何使用 jOrgChart 在 HTML 文件中创建图表?

javascript - 升级到 Firebase JS 8.0.0 : Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase' )

jquery循环插件pager被覆盖

javascript - 如何使用 jquery/javascript 重置所选类 li 元素