いくつかの簡単なJS操作Select記録

	<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>

	<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>