主题:  ASP.NET中如何结合JS,在列表框中作多项选择

蓝鲸

职务:版主
等级:5
金币:42.1
发贴:2614
注册:2001/12/20 15:57:57
#12005/9/19 0:35:36
最近实在在忙,并且有些不是很顺心,写的东西就很少了。
人就这样总不能事事随心。

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


图片如下:


非常大鱼

蓝鲸

职务:版主
等级:5
金币:42.1
发贴:2614
注册:2001/12/20 15:57:57
#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
注册:2001/12/20 15:57:57
#32005/9/19 0:52:03
下面就可以写正程序了,首先用JS 写

一、把左(lstCategory)框中的选择项加到右边框(lstSelectCategory)中
function addOption()
{
  if (document.Form1.lstCategory.selectedIndex < 0) return;
        
  opt = document.Form1.lstCategory.options[document.Form1.lstCategory.selectedIndex];
  selOpt = new Option(cleanOptionString(opt.text), opt.value);
        
  if(document.Form1.lstSelectCategory.length > 0)
  {
    for (i = 0; i < document.Form1.lstSelectCategory.length; i++)
    {
      if (document.Form1.lstSelectCategory.options[i].value == selOpt.value)
      {
        return;
      }
    }
  }
        
  document.Form1.lstSelectCategory.options.add(selOpt);
}


二、去除右框中的项
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
注册:2001/12/20 15:57:57
#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
注册:2001/12/20 15:57:57
#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程序
<script language="javascript" src="../Script/function.js"></script>
<script language="javascript">
  function cleanOptionString(str)
  {
    str = str.replace("├", "");
    str = str.replace("│", "");
    str = str.replace("└", "");
    str = str.replace(" ", "");
    str = Trim(str);
    return str;
  }
      
  function addOption()
  {
    if (document.Form1.lstCategory.selectedIndex < 0) return;
        
    opt = document.Form1.lstCategory.options[document.Form1.lstCategory.selectedIndex];
    selOpt = new Option(cleanOptionString(opt.text), opt.value);
        
    if(document.Form1.lstSelectCategory.length > 0)
    {
      for (i = 0; i < document.Form1.lstSelectCategory.length; i++)
      {
        if (document.Form1.lstSelectCategory.options[i].value == selOpt.value)
        {
          return;
        }
      }
    }
        
    document.Form1.lstSelectCategory.options.add(selOpt);
    document.Form1.txtArrCategoryID.value += selOpt.value + "|";
  }
      
  function removeOption()
  {
    if (document.Form1.lstSelectCategory.selectedIndex < 0) return;
        
    opt = document.Form1.lstSelectCategory.options[document.Form1.lstSelectCategory.selectedIndex];
    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)
    document.Form1.lstSelectCategory.options.remove(document.Form1.lstSelectCategory.selectedIndex);  }
</script>

编辑历史:[此帖最近一次被 蓝鲸 编辑过(编辑时间:2005-09-19 01:44:52)]

非常大鱼

蓝鲸

职务:版主
等级:5
金币:42.1
发贴:2614
注册:2001/12/20 15:57:57
#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]));
    }

    // ......
}

(全部完成)


非常大鱼

浮尘

职务:普通成员
等级:3
金币:7.0
发贴:1258
注册:2001/11/19 12:41:09
#72005/9/19 17:58:57
好像没有实现多选功能吧?



蓝鲸

职务:版主
等级:5
金币:42.1
发贴:2614
注册:2001/12/20 15:57:57
#82005/9/20 0:52:14
diffmaker在上个帖子中说
引用:
好像没有实现多选功能吧?


可能误会吧,是指选择多个分类的意思。
其实你指的可能是一次在列表框中选择多项吧,这也不难,把多选属性设为True就行的,其后的程序就一项项判断了,不是很难的
本文不是讲列表框的一次多项选择功能。


非常大鱼