ASP.NET中如何结合JS，在列表框中作多项选择

趋明 2012-03-16

展开全文

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#12005-9-19 0:35:36
最近实在在忙，并且有些不是很顺心，写的东西就很少了。
人就这样总不能事事随心。

晚上作程序，网页归类程序，就是一个网页可以选择多个分类，查找方便些，在选择分类时，有以下列表框，怎样使用一看就知了，不用说了吧。

图片如下：

非常大鱼

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#22005-9-19 0:45:35
原先程序是在服务端完成的，比较方便些，就是用.net的控件事件，在列表框中逐项添加或删除。但总觉不是很好，因每提交一次都是在服务器完成，速度比较慢。就想在客户端一次添加好以后，一次提交，不是更好。
这样就不得不用js了。

先准备一些函数，需要用到的。
cleanOptionString(str)是用来清除左边列表框文字的一些空格或制表符号的。

     function cleanOptionString(str)
      {
        str = str.replace("├", "");
        str = str.replace("│", "");
        str = str.replace("└", "");
        str = str.replace("　", "");
        str = Trim(str);
        return str;
      }

注意，Trim函数是去掉左右空格的，自定义函数，因函数较长，就不再这里帖出来了，各位去写一下函数，也不是很难。

非常大鱼

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#32005-9-19 0:52:03
下面就可以写正程序了，首先用JS 写

一、把左（lstCategory）框中的选择项加到右边框（lstSelectCategory）中

二、去除右框中的项

function removeOption()
{
if (document.Form1.lstSelectCategory.selectedIndex < 0) return;

opt = document.Form1.lstSelectCategory.options[document.Form1.lstSelectCategory.selectedIndex];
document.Form1.lstSelectCategory.options.remove(document.Form1.lstSelectCategory.selectedIndex);}

现在可以把分类添加到右框中了，当然上述函数已经为防止重复选择作了处理了。编辑历史:[此帖最近一次被蓝鲸编辑过(编辑时间:2005-09-19 01:45:52)]

非常大鱼

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#42005-9-19 1:00:54
接下来，就用C#写入数据库了

private void btnOK_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
// ......

// 添加分类
foreach (ListItme item in lstSelectCategory.Items)
{
myWeb.AddCategory(newID, Convert.ToInt32(item.Value));
}

// ......
}

但随后，我发觉，在数据库中没有添加任何的分类，是什么原因没有完成呢。
以下是我做的一些改进，并想了一些特殊方法。

非常大鱼

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#52005-9-19 1:12:59
最后想办法，另设计文本框的服务端控件（txtArrCategoryID），用来保存已经添加的分类ID号，当然你不想看到这个控件，就把它的width和height设置为0就行了，不要设置Visible属性设置为False，否则JS程序是认不出来的。

在添加程序中增加一行
document.Form1.txtArrCategoryID.value += selOpt.value + "|";

大删除程序中也添加
document.Form1.txtArrCategoryID.value = ("|" + document.Form1.txtArrCategoryID.value).replace("|" + opt.value + "|", "|");
document.Form1.txtArrCategoryID.value = document.Form1.txtArrCategoryID.value.substring(1, document.Form1.txtArrCategoryID.value.length)

完整JS程序

非常大鱼

蓝鲸
职务：版主
等级：5
金币：42.1
发贴：2614
引用

#62005-9-19 1:16:17
最后，把C#程序也改一下
private void btnOK_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
// .......

    if (txtArrCategoryID.Text.Trim() == "")
    {
        labInfo.Text = "没有选择黄页分类，请选择。";
        txtArrCategoryID.Text = "";
        return;
    }
    char[] splitChr = new char[]{'|'};
    string IDs = txtArrCategoryID.Text.Substring(0, txtArrCategoryID.Text.Length -1);
    string[] arrID = IDs.Split(splitChr);

    // ......

    // 添加分类
    for(int i = 0; i < arrID.Length; i++ )
    {
        myWeb.AddCategory(newID, Convert.ToInt32(arrID[i]));
    }

// ......
}

（全部完成）