一个下拉框的问题
问:怎么实现下拉框既 "下拉 "又多选,如果只是加multiple,就变的象列表框,这不是我要的效果
[解决办法]
在下拉框里的值前面都加上复选框,通过选择复选框来多选
[解决办法]
<form name= "frm " id=frm action= "xxx.jsp " method= "get " onsubmit= "return frm_onsubmit() ">
<input type= "hidden " name= "aaa " />
<TABLE cellSpacing=0 cellPadding=0 width=500 align=center border=0 >
<tr>
<td>
<table width= "100% " border= "0 " cellpadding= "0 " cellspacing= "0 "
>
<tr>
<td width= "5 " colspan= "3 " > </td>
</tr>
<tr>
<td colspan= "3 " >
<span class= "red-txt "> * </span> 选择XX:
</td>
</tr>
<tr>
<td width= "40% " align= "center " >
供选的XX
<br>
<select multiple name= "column1 " size= "14 " style= "width: 200px; ">
<option id= "1 "> 1111 </option>
<option id= "2 "> 2222 </option>
<option id= "3 "> 3333 </option>
<option id= "4 "> 4444 </option>
</select>
</td>
<td width= "20% " align= "center " >
<p>
<a href= "javascript:madd() "> >> </a>
</p>
<p>
<a href= "javascript:mdel() "> << </a>
</p>
<p>
<a href= "aaa.html "> 重置 </a>
</p>
</td>
<td width= "40% " align= "center " >
选中的XX
<br>
<select size= "14 " style= "width: 200px; " multiple name= "column2 ">
</select>
<br>
</td>
</tr>
<tr>
<td align= "center " colspan= "3 " >
<a href= "javascript:save() "> 保存 </a>
<a href= "javascript:window.history.back() "> 返回 </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<!--热销产品结束 -->
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function madd(){
var i,m_if= "false ";
for (i=window.frm.column1.length-1; i> =0; i--) //循环第一个select框的每一个option
{ if (window.frm.column1.options[i].selected) //如果该option被选中
{ for (var j=window.frm.column2.length-1; j> =0; j--) //循环第二个select框的每一个option
{ //判断第一个select框中的option是否已经被添加,是的话写标记m_if= "true "
if (window.frm.column1.options[i].text==window.frm.column2.options[j].text)
m_if= "ture " ;}
if(m_if== "false "){ //将选中的option添加到第二个select框
m_option = document.createElement( "OPTION ");
m_option.text = window.frm.column1.options[i].text;
m_option.id=window.frm.column1.options[i].id; //创建id属性保存各列的name属性值
m_option.value = frm.column2.length;
frm.column2.add(m_option); //添加option条件
frm.column1.remove(i);
var minselect=i; //定义标记
}
}
}
if(minselect==null);
else if(window.frm.column1.length> 0){
minselect=minselect; //添加结束后将焦点移到下一个option,
if (minselect> =window.frm.column1.length) minselect=0; //添加完最后一个option则,移到第一个
window.frm.column1.options[minselect].selected=true;
}
}
//删除右边select框的option
function mdel(){
var i,m_if= "false ";
for (i=window.frm.column2.length-1; i> =0; i--) //循环第二个select框的每一个option
{ if (window.frm.column2.options[i].selected) //如果该option被选中
{ for (var j=window.frm.column1.length-1; j> =0; j--) //循环第1个select框的每一个option
{ //判断第2个select框中的option是否已经被添加,是的话写标记m_if= "true "
if (window.frm.column2.options[i].text==window.frm.column1.options[j].text)
m_if= "ture " ;}
if(m_if== "false "){ //将选中的option添加到第1个select框
m_option = document.createElement( "OPTION ");
m_option.text = window.frm.column2.options[i].text;
m_option.id = window.frm.column2.options[i].id; //创建id属性保存各列的name属性值
m_option.value = frm.column1.length;
frm.column1.add(m_option); //添加option条件
// window.frm.column2.options[i].selected=false; //添加后移去焦点
frm.column2.remove(i);
var minselect=i; //定义标记
}
}
}
if(minselect==null);
else if(window.frm.column2.length> 0){
minselect=minselect; //添加结束后将焦点移到下一个option,
if (minselect> =window.frm.column2.length) minselect=0; //添加完最后一个option则,移到第一个
window.frm.column2.options[minselect].selected=true;
}
}
function frm_onsubmit() {
var sub_str= " ";
for (var i=0;i <=window.frm.column2.length-1;i++)
{ //循环取出各option的id属性的值,用 ", "分隔.
sub_str=sub_str+window.frm.column2.options[i].id+ ", ";
}
//将查询条件String串返回到toolbar.htm
frm.aaa.value= sub_str;
}
function save() {
frm_onsubmit();
frm.submit();
}
</script>
javascript可能有点问题
自己改吧