注册页面，关于要选择多个品牌内容的问题

Question

        var items={
            all:{
                get:function(){
                    return items.$("ddlAll");
                }
            },
            selected:{
                get:function(){
                    return items.$("ddlSel");
                }
            },
            add:function(){
                var allItems=this.all.get();
                var selItems=this.selected.get();
                if(allItems.selectedIndex!=-1){
                    var currItem=allItems.options[allItems.selectedIndex];
                    var currIndex=allItems.selectedIndex;
                    allItems.options.remove(currIndex);
                    selItems.options.add(currItem);
                }
            },
            del:function(){
                var allItems=this.all.get();
                var selItems=this.selected.get();
                if(selItems.selectedIndex!=-1){
                    var currItem=selItems.options[selItems.selectedIndex];
                    var currIndex=selItems.selectedIndex;
                    selItems.options.remove(currIndex);
                    allItems.options.add(currItem);
                }
            },
            $:function(id){
                if(id && typeof id=="string"){
                    return document.getElementById(id);
                }
            }
        };
            <table>
                <tr>
                    <td>所有品牌</td>
                    <td>
                        <select id="ddlAll" multiple="multiple" ondblclick="items.add()">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </td>
                    <td>已选品牌</td>
                    <td>
                        <select id="ddlSel" multiple="multiple" ondblclick="items.del();">
                            <option>a</option>
                            <option>b</option>
                            <option>c</option>
                            <option>d</option>
                        </select>
                    </td>
                </tr>
            </table>

Answer 1

非常感谢，不过，能不能把代码在优化一下，能不能在两个select中间加一个 添加和删除按钮，而不是点击现在的<option> 来添加删除....我js比较白痴

Answer 2

<script language="javascript">
//此函数实现列表中所选择项的删除与移到到别外一个列表中的功能.2001/04/04
//参数表：
//src 源列表
//des 目的列表(如果省略则删除源列表中选中的项)
//exce 如果源列表中某一项的文本与此参数相同则该项不能被移走或删除(可省略)
//d1 指定源列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//d2 指定目的列表所在的框架或窗口(如省略则在当前框架或窗口中查找)
//
function SelMove(src,des,check,exce,d1,d2,del) {  if (!src) return false;
        var oSrc=MM_findObj(src,d1);
        if (!oSrc) return false;
        if (!des) {
                for (i=0;i<oSrc.options.length;i++) {
                        if (oSrc.options(i).selected){
                                if (oSrc.options(i).innerText!=exce) {
                                        oSrc.options.remove(i);
                                        i--;
                                }
                        }
                }
        }
        else {
                var oDes=MM_findObj(des,d2);
                if (!oDes) return false;
                for (i=0;i<oSrc.options.length;i++) {
                        var oSrcOption =oSrc.options.item(i);
                        if(oSrcOption.selected){
                                if(check && check(oDes,oSrcOption)){
                                        if(oSrcOption.innerText!=exce) {
                                                var oOption = document.createElement("OPTION");
                                                oDes.options.add(oOption);
                                                oOption.innerText = oSrcOption.innerText;
                                                oOption.value = oSrcOption.value;
                                                oSrcOption.selected=false;
                                                if(del) {oSrc.options.remove(i);i--;}
                                        }
                                }
                        }
                }
        }
}function SelSelectedAll(oSrc){
        if(!oSrc) return false;
        var i;
        for(i=0;i<oSrc.options.length;i++){
                oSrc.options.item(i).selected=true;
        }}function SelAdd(oDes,text,value){
        if (!oDes) return false;
        var oOption=document.createElement("OPTION");
        oDes.options.add(oOption);
        oOption.innerText=text;
        oOption.value=value;
}
function SelRemove(oSrc,name,value){
        if(!oSrc) return false;
        var i;
        for(i=0;i<oSrc.options.length;i++){
                if(oSrc.options.item(i).innerText==name && oSrc.options.item(i).value==value) {
                        oSrc.options.remove(i);
                        break;
                }
        }
}
function SelClear(des) {
        var oDes=MM_findObj(des);
        var i;
        if (oDes) {
                for (i=0;i<oDes.options.length;i++) {
                        oDes.options.remove(i);
                        i--;
                }
        }
}function check_City(des,op){
if(checkPostType(des,op)){
return true;
}
else {
return false;
}
}function checkPostType(des,op){
if(!des || !op) return true;
var flag = true;
var ops = des.options;
var i=0;
for(i=0;i<ops.length;i++){
if(ops.item(i).value==op.value) {
flag=false;
}
if(ops.item(i).value%100==0 && ops.item(i).value==op.value-op.value%100){
flag=false;
}
if(!flag){
alert('选项 ['+ops.item(i).innerText+'] 已经包含了 ['+op.innerText+'].');
return flag;
}
if(op.value%100==0 && op.value==ops.item(i).value-ops.item(i).value%100){
ops.remove(i);
i--;
}
}
return flag;
}
function checkForm()
{
   SelSelectedAll(document.form1.select2);
}
</script>
<form id="form1" name="form1" method="post" action="">
  <table width="420" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="180" rowspan="2">
              <select name="select1" size="10" multiple="multiple" id="select1" style="width:180px">
              </select>
              </td>
              <td width="60" align="center"><input type="button" name="Submit" value="添加" onClick="SelMove('select1','select2',check_City)"></td>
              <td width="180" rowspan="2">
                <select name="select2" size="12" multiple id="select2" style="width:180px">
                </select>
              </td>
            </tr>
            <tr>
              <td align="center"><input type="button" name="Submit2" value="删除" onClick="SelMove('select2')"></td>
            </tr>
  </table>
  <input type="submit" name="button" id="button" value="提交" onclick="return checkForm()" />
</form>

Answer 3

三楼少给了个函数MM_findObj，加进去就可以了function   MM_findObj(n,d)   
{   //v4.01   
  var   p,i,x;   
  if(!d)   
d=document;   
  if((p=n.indexOf("?"))>0&&parent.frames.length)   
{   
  d=parent.frames[n.substring(p+1)].document;   
    n=n.substring(0,p);   
}   
  if(!(x=d[n])&&d.all)     
  x=d.all[n];     
  for   (i=0;!x&&i<d.forms.length;i++)   
x=d.forms[i][n];   
  for(i=0;!x&&d.layers&&i<d.layers.length;i++)   
x=MM_findObj(n,d.layers[i].document);   
  if(!x   &&   d.getElementById)     
  x=d.getElementById(n);   
return   x;   
}