Question

以下是我在multiselect page找到的这个多选框的所有代码

HTML：

<link href="jquery-ui.css" rel="stylesheet" />
<link href="ui.multiselect.css" rel="stylesheet" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script src="jquery.localisation-min.js"></script>
<script src="ui.multiselect.js"></script>

<script type="text/javascript">
    $(function () {
        $(".multiselect").multiselect();
    });
</script>

<form runat="server">
    <select class="multiselect" multiple="true" style="width:460px; height:200px;">
        <option value="AA">AA@gmail.com</option>
        <option value="AB">AB@gmail.com</option>
        <option value="AC">AC@gmail.com</option>
        <option value="AD">AD@gmail.com</option>
        <option value="AE">AE@gmail.com</option>
        <option value="AF">AF@gmail.com</option>
   </select>

    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>

C＃：

protected void Button1_Click(object sender, EventArgs e)
{
    String[] emailList = new String[1000];
    //find the ul in the html and loop through each li
}

这一切在客户端转化为这一点（我不确定所有这些都是100％正确，因为我只是从浏览器复制并粘贴，但所有相关信息都在这里）：< / p>

<div class="ui-multiselect ui-helper-clearfix ui-widget" style="width: 514px;">
    <div class="selected" style="width: 272px;">
        <div class="actions ui-widget-header ui-helper-clearfix">
            <ul class="selected connected-list ui-sortable" id="multiselectedItems" runat="server" style="height: 164px;">ev
                <li class="ui-helper-hidden-accessible" style=""/>
                <li class="ui-state-default ui-element ui-draggable" title="AA@gmail.com" style="display: list-item;">ev
                <li class="ui-state-default ui-element ui-draggable" title="AB@gmail.com" style="display: list-item;">ev
            </ul>
        </div>
    <div class="available" style="width: 234px;">
</div>

现在针对这个问题，我需要找到并遍历无序列表中的每个列表项，获取title属性并在单击按钮时将其存储在字符串数组中。我已经尝试使用Form.Request [“multiselect”]和Page.FindControl [“mutliselect”]找到控件，但是没有那些工作。一如既往，欢迎任何帮助，谢谢。

编辑＃1：我查看并搜索但显然不是一种方法来做到这一点，但是，我没有创建一个新的几乎相同的问题，我只是编辑这个...有没有办法从多选框中修改javascript文件我上面联系过？我想如果有可能那么可能更容易让javascript在select中添加一个属性到控件...我只是不确定在javascript中我可以添加这个，所以继续更新的问题.. 。我必须编辑多选javascript文件中的哪个位置，以便为正确选择的选项添加属性？

Answer 1

你可以给你的html选择元素

提供runat =“server”和id标签

   <select runat="server" Id="SelectList" class="multiselect" multiple="true" style="width:460px; height:200px;">
            <option value="AA">AA@gmail.com</option>
            <option value="AB">AB@gmail.com</option>
            <option value="AC">AC@gmail.com</option>
            <option value="AD">AD@gmail.com</option>
            <option value="AE">AE@gmail.com</option>
            <option value="AF">AF@gmail.com</option>
       </select>


    ***


protected void Button1_Click(object sender, EventArgs e)
{
    (System.Web.UI.HtmlControls.HtmlSelect)SelectList.SelectedIndices.. 
    String[] emailList = new String[1000];
    //find the ul in the html and loop through each li
}

Answer 2

一种方式，当然不是最优雅的方法，是使用HtmlAgiliyPack来抓取<li>元素的代码并提取标题

var doc = new HtmlAgilityPack.HtmlDocument();
//Path to the file on the filesystem
doc.LoadHtml("patch to your htmlfile");

if (!doc.DocumentNode == null)
{
   foreach (HtmlNode node in doc.DocumentNode.SelectNodes("//li[@class='email']"))
   {
       //add title to your array
       //I recommend using a List<string> instead
       //list.Add(node.innerHtml);
   }

}

如果您想从网上加载资源，则需要使用略有不同的代码：

var web = new HtmlAgilityPack.HtmlWeb();
var doc = web.Load("http://www.path.com/to/your/file.html");
foreach(var node in doc.DocumentNode.SelectNodes("//li[@class='email']"))
{
  //...
}

从javascript生成的html中查找列表项

2 个答案: