html之select应用

最新推荐文章于 2023-07-03 18:44:55 发布

置顶 38度秋裤

最新推荐文章于 2023-07-03 18:44:55 发布

阅读量522

点赞数

本文链接：https://blog.csdn.net/u010452908/article/details/43803559

版权

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<base href="<%=basePath%>">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	<[if you need help writing your script<web>, w3school could help you lot, really impressive@ ]>
	<[reference: http://www.w3school.com.cn/jsref/index.asp]>
	<[reference: http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp]>
	<[reference: http://www.w3school.com.cn/jsref/dom_obj_event.asp]>
	<[reference: http://www.w3school.com.cn/jquery/]>
	<[reference: http://hemin.cn/jq/]>
	<[reference: https://developer.mozilla.org/en-US/docs/Web/API]>
	DWRUtil.removeAllOptions("noSelectStaffList");
    DWRUtil.addOptions("noSelectStaffList", data);
    // should gotta an elegant way to implement require	
    
    // <[select 对象的属性 ]>
    selectObject.selectedIndex=number
    disabled 设置或返回是否应禁用下拉列表。 
    form 返回对包含下拉列表的表单的引用。 
    id 设置或返回下拉列表的 id。 
    length 返回下拉列表中的选项数目。 
    multiple 设置或返回是否选择多个项目。 
    name 设置或返回下拉列表的名称。 
    selectedIndex 设置或返回下拉列表中被选项目的索引号。 
    size 设置或返回下拉列表中的可见行数。 
    tabIndex 设置或返回下拉列表的 tab 键控制次序。 
    type 返回下拉列表的表单类型。 
    
    // <[option 对象的属性 ]>
    defaultSelected 返回 selected 属性的默认值。 
    disabled 设置或返回选项是否应被禁用。 
    form 返回对包含该元素的 <form> 元素的引用。 
    id 设置或返回选项的 id。 
    index 返回下拉列表中某个选项的索引位置。 
    label 设置或返回选项的标记 （仅用于选项组）。 
    selected 设置或返回 selected 属性的值。 
    text 设置或返回某个选项的纯文本值。 
    value 设置或返回被送往服务器的值 
	-->
		<script type="text/javascript">
		function initData()
		{  
		   var playerindex = ['afs','kt','lbl','jd','dlt','kb','lwsj','md','wd','ym','pes','ldm'];
		   var playerLastName = ['艾弗森','卡特','詹姆斯','乔丹','杜兰特','科比','诺维斯基','麦迪'
		                          ,'韦德','姚明','皮尔斯','罗德曼'];
		   var hasSelectedStaffList = document.getElementById('hasSelectedStaffList');
		   for (var i = 0; i < playerindex.length; i++)
		   {
		      var newOpt = new Option(playerLastName[i],playerindex[i]) ;
		       hasSelectedStaffList.add(newOpt);
		   }
         
           // 动态创建表格.
          var t = document.getElementById("showPlayerTable"); 
           var b = document.createElement('tbody');   
           var r = document.createElement('tr');  
           for (var j = 0; j < 5; j++)  
           {  
            var c = document.createElement('td');
            var divN = document.createElement('div');
            divN.style.display = 'none';
            divN.id = j;
 
            var imgN = document.createElement('img');
            imgN.name = "player"+(j+1);
            imgN.id = "player"+(j+1);

            divN.appendChild(imgN); 
            c.appendChild(divN);
            r.appendChild(c);
          }  
           b.appendChild(r);
           t.appendChild(b);
        }
		  
		function debugPlayer(objSourceElement, objTargetElement)
	    {  
		    var fromObj = window.eval(objSourceElement) ;
		    var toObj = window.eval(objTargetElement) ;    
		    var objLength = fromObj.options.length ;
		    var hasFlag = false;
		    
		    if(objLength)
	        {
	            var selectCount = 0;
	            for (var i = 0; i < objLength; i++)
	            {
	                if (fromObj.options[i].selected)
	                {
	                    selectCount++;
	                }
	            }
	            
	            // 如果选择的超过五个,就全部变为未选择状态
	           if (selectCount > 5)
	            {
	                alert("不能超过五个球员");
	                for (var i = 0; i < objLength; i++)
	                {
	                  fromObj.options[i].selected = false;
	                }
	            }
	        }
	        
			while(( i = fromObj.selectedIndex) >= 0)
		    {   
		        var newOpt = new Option(fromObj.options[i].text,fromObj.options[i].value) ;
		   
		        if(!hasFlag)
		        {   
		            if (toObj.options.length >4)
		            {
		              alert("不能超过5个球员");
		              return;
		            }
		        	toObj.add(newOpt) ;
		        }
		        newOpt=null;
		        fromObj.options.remove(i) ;
		    }
		    
		    var showNum = toObj.options.length;
		    for (var i = 0; i < showNum; i++)
		    {    
		         document.getElementById(i).style.display = 'block';
		         document.getElementById("player"+(i+1)).src = "player/"+toObj.options[i].value+".jpg";
		    }
	    }	
	</script>
	</head>

	<body οnlοad="initData()">
	<form action="" id="publicStaffSelectFrm" name="publicStaffSelectFrm">
		<table>
		   <tr><td colspan='3' style="color:red">**select top-5 players from list:</td></tr>
			<tr>
				<td>
					<div id="noSelectStaffListDiv">
						<select id="noSelectStaffList" name="noSelectStaffList" size="10"
							multiple="true"
							οndblclick="debugPlayer(document.publicStaffSelectFrm.noSelectStaffList, document.publicStaffSelectFrm.hasSelectedStaffList)"
							style="width: 240px; overflow: scroll">
						</select>
					</div>
				</td>
				<td>
					<table>
						<tr>
							<td>
								<input id="returnOne" name="returnOne" type="button"
									οnclick="debugPlayer(document.publicStaffSelectFrm.hasSelectedStaffList,document.publicStaffSelectFrm.noSelectStaffList)"
								    value="< " />
							</td>
						</tr>
					</table>
				</td>
				<td>
					<div id="hasSelectStaffListDiv">
						<select id="hasSelectedStaffList" name="hasSelectedStaffList"
							size="10" multiple="true" style="width: 240px; overflow: scroll"
							οndblclick="debugPlayer(document.publicStaffSelectFrm.hasSelectedStaffList,document.publicStaffSelectFrm.noSelectStaffList)">
						</select>
					</div>
				</td>
			</tr>
		   <!-- <tr><td colspan='3' style="color:blue"><span>you choose them:</span><div id="showPlay" name="showPlay"></div></td></tr> -->
		</table>
		<table id="showPlayerTable">
		</table>
	</form>
	</body>
</html>

38度秋裤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html之select应用

w3 htmlw3 domweb APIw3 jQueryjQuery API <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":
复制链接

扫一扫