js实现下拉框支持添加和删除的方式

痛定思痛。 2022-08-07 08:50 169阅读 0赞

1,在网上看到的一种方式.简单.而且不用考虑样式,但是,取添加到右边选项狂的结果,只能取到一个

代码如下图:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
    
     <body>
    	<select name="sel_place1"  multiple id="sel_place1" style="width:100px;height:300px;" >
    	  <option value="sel1">江苏省</option>
    	  <option value="sel2">广东省</option>
    	  <option value="sel3">河南省</option>
    	  <option value="sel4">吉林省</option>
    	  <option value="sel5">浙江省</option>
    	</select>
    	<input name="sure2" type="button" id="sure2" onClick="allsel(sel_place1,sel_place2);" value="add">
    	<input name="sure1" type="button" id="sure1" onClick="allsel(sel_place2,sel_place1);" value="delete">
    	<select name="sel_place2" multiple id="sel_place2" style="width:100px;height:300px;">
        </select>
    	<input type="button" οnclick="getResult()" value="get result"/>
    	<script type="text/javascript">
    	function allsel(n1,n2)
    	{
    	  while(n1.selectedIndex!=-1)
    	  {
    	   var indx=n1.selectedIndex;
    	   var t=n1.options[indx].text;
    	   n2.options.add(new Option(t));
    	   n1.remove(indx);
    	  }
    	}
    	function getResult(){
    		alert(document.getElementById("sel_place2").value);
    	}
    	</script>
     </body>
    </html>

第二种方式采用ul li的方式 本人在项目中实际用到的..实现起来稍微复杂

代码如下:

<div class="industryboxleft">
    						<ul>
    							<c:if test="${not fn:contains(categoryIds,'[1]') }"><li id="1">Listen to the home appliances series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[2]')}"><li id="2">LED and solar energy products series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[3]')}"><li id="3">Digital Communication Series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[4]') }"><li id="4">Home appliances series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[5]') }"><li id="5">Building materials furniture series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[6]')}"><li id="6">Home Furnishing and dress series</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[7]') }"><li id="7">Raw materials</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[8]')}"><li id="8">Other raw materials</li></c:if>
    							<c:if test="${not fn:contains(categoryIds,'[0]') }"><li id="0">Other</li></c:if>
    						</ul>
    						</div>
    						<div class="industryboxcenter">
    						<span></span>
    							<input type="button" value="Add" id="industryboxcenter_add"/><br/>
    							<input type="button" value="Delete" id="industryboxcenter_delete"/>
    						</div>
    						<div class="industryboxright">
    							<input type="hidden" name="categoryIds" value="${companyDraft.categoryIds }"/>
    							<ul>
    								<c:if test="${fn:contains(categoryIds,'[1]') }"><li id="1">Listen to the home appliances series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[2]')}"><li id="2">LED and solar energy products series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[3]')}"><li id="3">Digital Communication Series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[4]') }"><li id="4">Home appliances series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[5]') }"><li id="5">Building materials furniture series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[6]')}"><li id="6">Home Furnishing and dress series</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[7]') }"><li id="7">Raw materials</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[8]')}"><li id="8">Other raw materials</li></c:if>
    								<c:if test="${fn:contains(categoryIds,'[0]') }"><li id="0">Other</li></c:if>
    							</ul>
    						</div>

js部分

$(".industryboxleft ul li").each(function(){
    		$(this).bind("click",function(){
    			$(".industryboxleft ul li").css("backgroundColor","");
    			$(this).css("backgroundColor","#ccc");
    			leftChooseLi=$(this);
    		});
    	});
    	$(".industryboxright ul li").each(function(){
    		$(this).bind("click",function(){
    			$(".industryboxright ul li").css("backgroundColor","");
    			$(this).css("backgroundColor","#ccc");
    			rightChooseLi=$(this);
    		});
    	});
    	$("#industryboxcenter_add").click(function(){
    		if(leftChooseLi != ""){
    			$(".industryboxright ul").append("<li id='"+leftChooseLi.attr("id")+"'>"+leftChooseLi.html()+"</li>");
    			$(".industryboxright ul li").each(function(){
    				$(this).bind("click",function(){
    					$(".industryboxright ul li").css("backgroundColor","");
    					$(this).css("backgroundColor","#ccc");
    					rightChooseLi=$(this);
    				});
    			});
    			leftChooseLi.remove();
    			leftChooseLi="";
    			$("#categoryIds_error").html(" ").attr("class","");
    		}
    	});
    	$("#industryboxcenter_delete").click(function(){
    		if(rightChooseLi != ""){
    			$(".industryboxleft ul").append("<li id='"+rightChooseLi.attr("id")+"'>"+rightChooseLi.html()+"</li>");
    			$(".industryboxleft ul li").each(function(){
    				$(this).bind("click",function(){
    					$(".industryboxleft ul li").css("backgroundColor","");
    					$(this).css("backgroundColor","#ccc");
    					leftChooseLi=$(this);
    				});
    			});
    			rightChooseLi.remove();
    			rightChooseLi="";
    		}
    	});