几个简单的JS操作Select记录

HTML代码：

	<table width="400" align="center" border="1">
		<tr background="">
			<td width="40%">
				过滤：<input type="text" size="10" id="filterKeyword" onkeyup="filter(this.value)" />
				<select style="width: 100%;" multiple name="left" id="left" size="8" >
					<option value="首页">首页</option>
					<option value="新闻">新闻</option>
					<option value="问答">问答</option>
					<option value="知识库">知识库</option>
					<option value="知识库和专栏">知识库和专栏</option>
					<option value="精彩访谈和讨论">精彩访谈和讨论</option>
					<option value="焦点新闻">焦点新闻</option>
					<option value="热门招聘">热门招聘</option>
					<option value="热门问答">热门问答</option>
					<option value="热门圈子">热门圈子</option>
					<option value="求职宝典">求职宝典</option>
					<option value="招聘和求职热点">招聘和求职热点</option>
					<option value="综合技术热点">综合技术热点</option>
					<option value="Web前端技术热点">Web前端技术热点</option>
				</select>
			</td>
			<td width="20%" align="center">
				<input type="button" value=" >>>> " onClick="moveOption(document.getElementById('left'), document.getElementById('right'), false)" />
				<br><br>
				<input type="button" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'), true)"/>
			</td>
			<td width="40%" valign="bottom">
				<select style="width: 100%;" multiple name="right" id="right" size="8" ></select>
			</td>
		</tr>
	</table>
	<select style="width: 100%; display: none;" multiple id="elOriginal" size="8" >
		<option value="首页">首页</option>
		<option value="新闻">新闻</option>
		<option value="问答">问答</option>
		<option value="知识库">知识库</option>
		<option value="知识库和专栏">知识库和专栏</option>
		<option value="精彩访谈和讨论">精彩访谈和讨论</option>
		<option value="焦点新闻">焦点新闻</option>
		<option value="热门招聘">热门招聘</option>
		<option value="热门问答">热门问答</option>
		<option value="热门圈子">热门圈子</option>
		<option value="求职宝典">求职宝典</option>
		<option value="招聘和求职热点">招聘和求职热点</option>
		<option value="综合技术热点">综合技术热点</option>
		<option value="Web前端技术热点">Web前端技术热点</option>
	</select>

 

 JS代码：

	<script language="JavaScript">
	<!--
	
		function filter(elKeyword) {
			elOriginal = document.getElementById('elOriginal');
			elRight = document.getElementById('right');
			elLeft = document.getElementById('left');
			clearSelect(elLeft);
			for(var i = 0; i < elOriginal.options.length; i++){
				var e = elOriginal.options[i];
				if(!checkSelectedOption(e.value, elRight)) {
					if(elKeyword == "" || e.text.indexOf(elKeyword) != -1) {
						elLeft.options.add(new Option(e.text, e.value));
					}
				}
			}
		}
	
		function clearSelect(el) {
			for(var i = el.options.length - 1; i >= 0; i--){
				el.remove(i);
			}
		}
	
		function checkSelectedOption(opValue, elSelected) {
			for(var i = 0; i < elSelected.options.length; i++){
				if(elSelected.options[i].value == opValue) {
					return true;
				}
			}
			
			return false;
		}
		
		function moveOption(e1, e2, isSort){
			var isMove = false;
			for(var i = 0; i < e1.options.length; i++){
				if(e1.options[i].selected){
		   			var e = e1.options[i];
		   			e2.options.add(new Option(e.text, e.value));
		   			isMove = true;
				}
			}
			if (isMove == true){
				for (var i = e1.options.length - 1; i >= 0; i--){
					if (e1.options[i].selected){
						e1.remove(i);
					}
				}
				
				if (isSort == true){
					filter(document.getElementById("filterKeyword").value);
				}
			}
		}
	//-->
	</script>

 

过滤部分原是使用Object.style.display='block'/'none'， 但IE不支持。