Js国家城市下拉菜单,左右选择框,像人才招聘网站上的,可以多选或单选职位,现在好像都这么用了,初次写没怎么美化,样子看下去有点粗糙,里面的城市可以自己添,只写出了框架,时间关系,供Fanser参考。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>国家下拉菜单,JS下拉菜单 www.codefans.net</title>
</head>
<body>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<form name="frm">
<select id="leftSel" name="s1" size="10" multiple style="width:100%" onchange="redirec(document.frm.s1.options.selectedIndex)">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
</select>
</form>
</td>
<td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="添加" onclick="addPro()"></p>
<p style="width:100%" align="center"><input type="button" value=">>" onclick="moveRight()"></p>
<p style="width:100%" align="center"><input type="button" value="<<" onclick="moveLeft()"></p>
<p style="width:100%" align="center"><input type="button" value="全部右移" onclick="moveAllright()"></p>
<p style="width:100%" align="center"><input type="button" value="全部左椅" onclick="moveAllleft()"></p>
<p style="width:100%" align="center"><input type="button" value="删除" onclick="removeSel()"></p>
<p style="width:100%" align="center"><input type="button" value="删除全部" onclick="delAll()"></p>
</td>
<td width="150">
<select id="rightSel" size="10" multiple style="width:100% "></select>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
<td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">
<input type="button" value="提交">
</td>
</tr>
</table>
<script>
var Z = function(id){
if (document.getElementById(id)){
return document.getElementById(id)
}
else{
alert("not found object");
}
}
var leftSel = Z("leftSel");
var rightSel = Z("rightSel");
function removeSel(){
if(leftSel.selectedIndex > -1){
for(i=0;i<leftSel.options.length;i++){
if(leftSel.options[i].selected){
leftSel.remove(i);
i = i - 1;
}
}
}
if(rightSel.selectedIndex > -1){
for(i=0;i<rightSel.options.length;i++){
if(rightSel.options[i].selected){
rightSel.remove(i);
i = i - 1;
}
}
}
}
function removeAll(){
for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){
leftSel.remove(i)||rightSel.remove(i);
i = i - 1;
}
}
function delAll(){
for(i=0;i<leftSel.options.length||i<rightSel.options.length;i++){
leftSel.remove(i)||rightSel.remove(i);
i = i - 1;
}
}
function moveRight(){
for(i=0;i<leftSel.options.length;i++){
if(leftSel.options[i].selected){
rightSel.appendChild(leftSel.options[i]);
i = i - 1;
}
}
}
function moveLeft(){
for(i=0;i<rightSel.options.length;i++){
if(rightSel.options[i].selected){
leftSel.appendChild(rightSel.options[i]);
i = i - 1;
}
}
}
function moveAllright(){
for(i=0;i<leftSel.options.length;i++){
rightSel.appendChild(leftSel.options[i]);
i = -1;
}
}
function moveAllleft(){
for(i=0;i<rightSel.options.length;i++){
leftSel.appendChild(rightSel.options[i]);
i = -1;
}
}
function addPro(){
var name = prompt();
if(name == null || name ==""){
alert("内容不能为空");
}
else{
var opt = document.createElement("