一个JS删除option值问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>发布需求</title>
<link rel="stylesheet" type="text/css" href="template/default/StyleSheet1.css"/>
<link rel="shortcut icon" href="img/favicon.ico" />
<script>
 function $(id){
        return document.getElementById(id);
} 
function funChaoSong(value){
spanContent=$('span1').innerHTML;
if((","+spanContent+",").indexOf(","+value+",")<0){
$('span1').innerHTML=(spanContent==""?value:spanContent+","+value);
}

}</script>
<table background="img/header.jpg" style="background-position:100%" width="100%" height="60px" border="0" align="center" cellpadding="0" cellspacing="0">
  
<td><span class="STYLE1">抄送：</span></td>
<td>
<select class="input1" onblur="this.className='input1'" name="chaosong" id="chaosong" onchange='funChaoSong(this.value);'>
   <option value="">请选择抄送人</option>
   <option value="1">王强</option>
<option value="2">ghjhgjhgj</option>
<option value="3">磊哥</option>
                           <option value="4">方式哥</option>
         </select>
      
     </td>
</tr>
<tr>
<td></td>
<td><span id='span1' class="span1" ></span>
</td>
</tr>
</table>我现在可以通过下拉菜单选择 把需要的人一个个加入 但现在我先做一个删除按钮 用JS控制删除我所现则的任意一个人 譬如：选择好的值为1，2，3，4，  我现在发现我选错了 我多选了一个3和2  请教各位JS删除2，3的办法

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>发布需求</title>
    <link rel="stylesheet" type="text/css" href="template/default/StyleSheet1.css"/>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <script>
         function $(id){
            return document.getElementById(id);
        } 
        function funChaoSong(value){
            spanContent=$('span1').innerHTML;
            if((","+spanContent+",").indexOf(","+value+",")<0){
                $('span1').innerHTML=(spanContent==""?value:spanContent+","+value);
            }    
            
        }
    function funShanChu() {
    var spanContents = $('span1').innerHTML.split(",");
    for(var i = 0; i < spanContents.length; ++i) {
    if(spanContents[i] == $('chaosong').value) {
    spanContents.splice(i, 1);
    break;
    }
    }
    $('span1').innerHTML = spanContents.join(",");
    }</script>
    </head>
    <body>
    <table background="img/header.jpg" style="background-position:100%" width="100%" height="60px" border="0" align="center" cellpadding="0" cellspacing="0">
          
            <td><span class="STYLE1">抄送：</span></td>
            <td>
                <select class="input1" onblur="this.className='input1'" name="chaosong" id="chaosong" onchange='funChaoSong(this.value);'>
                  <option value="">请选择抄送人</option>
                  <option value="1">王强</option>
                <option value="2">ghjhgjhgj</option>
                <option value="3">磊哥</option>
                               <option value="4">方式哥</option>
                </select> 
    <input type="button" value="删除" onclick="funShanChu()"/>
                  
            </td>
        </tr>
        <tr>
            <td></td>
            <td><span id='span1' class="span1" ></span>
            </td>
        </tr>
    </table>
    </body>
    </html>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>发布需求</title>
    <link rel="stylesheet" type="text/css" href="template/default/StyleSheet1.css"/>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <script>
         function $(id){
            return document.getElementById(id);
        } 
        function funChaoSong(value){
            spanContent=$('span1').innerHTML;
    var selectid=document.all.selectid.value;
    if(selectid.indexOf(value)<0){
       s = document.all.selectid.value + value+",";
    document.all.selectid.value=s
            } 
    forselect(s);        
        }
    function selectdel(str){
    var st=document.all.selectid.value.length; //长度
    var selectid=document.all.selectid.value; //selectid
    var rs = selectid.indexOf(str); //要删除id的位置
    if(rs+2==st){
    s = selectid.substring(0,st-2);
    }else{
    s =  selectid.substring(0,rs) + selectid.substring(rs+2,st);
    }
    document.all.selectid.value=s;
    forselect(s);
    }
    function forselect(str){
    spanContent=$('span1').innerHTML;
    var arrstr=str.substring(0,str.length-1).split(",");
    var selecthtml="";
    for(i=0;i<arrstr.length;i++){
    selecthtml+='<a href=javascript:selectdel('+arrstr[i]+')>'+arrstr[i]+'</a>,';
    }
    $('span1').innerHTML=selecthtml;
    }
    </script>
    <table background="img/header.jpg" style="background-position:100%" width="100%" height="60px" border="0" align="center" cellpadding="0" cellspacing="0">
          
            <td><span class="STYLE1">抄送：</span></td>
            <td>
                <select class="input1" onblur="this.className='input1'" name="chaosong" id="chaosong" onchange='funChaoSong(this.value);'>
                  <option value="">请选择抄送人</option>
                  <option value="1">王强</option>
                <option value="2">ghjhgjhgj</option>
                <option value="3">磊哥</option>
                               <option value="4">方式哥</option>
                </select>
                  
            </td>
        </tr>
        <tr>
            <td></td>
            <td><span id='span1' class="span1" ></span><br>
    <input type="hidden" name="selectid" value="">
            </td>
        </tr>
    </table>
      

  3.   

    用一个用户名中没有的字符分隔
    如
    用户名,用户名,然后可以使用 用户名, 查找是否重复,存在不插入,
    或是在插入时在option中做一下记号,发现有这个记号就不动了.
      

  4.   

    设置个隐藏域保存你所选
    <input type="hidden" value="" id="vl" name='vl'>function funChaoSong(vl)
    {
     var all_vl=document.getElementById("vl").value;
     if(all_vl.indexOf(vl)!=-1)
     {
         all_vl.replace(vl,"")
         all_vl.replace(",,",",")
     }
     else
     {
         if(all_vl=="")
         {
           all_vl=vl
         }
         else
         {
         all_vl=","+vl
         }
     }
    document.getElementById("vl").value=all_vl
    document.getElementById("span1").innerHTML=all_vl;
    }
    这样你在提交的时候也好接受。$_POST["vl"]
      

  5.   

       else 
        { 
        all_vl=all_vl+","+vl 
        } 
    //这里忘了累加了。
      

  6.   

     function funChaoSong(value){
            spanContent=$('span1').innerHTML;
            if((","+spanContent+",").indexOf(","+value+",")<0){
                $('span1').innerHTML=(spanContent==""?value:spanContent+","+value);
            }else
    { 
    selectdel(value);
    }
     
           
        }
    function selectdel(value)
    {

    var text=$('span1').innerHTML;
    $('span1').innerHTML=(value==text.substring(text.length-1,1)?text.replace(value,''):text.replace(value+',',''));

           // text1 =   text.replace(value+',','');// 只能替换1次
    //$('span1').innerHTML=text1;

    }
    经测试，不过有点小bug连续选择最后一个不会删除它。其他没问题。。