Question

jsp中的下拉框怎么隐藏其中的某一项

在jsp页面有好多下拉框，都是从数据库读出来的数据，option数据都相同。
现在我想A下拉框选中值 a 的时候，B、C、D...等下拉框中的a值隐藏掉，不是移除。请问该怎么实现。
<td style="border: 0px; font-size: 14px;">
${gvo.element.elementChName }:
</td>
<td style="border: 0px; font-size: 14px;">
<select id="FILE${i+1}" name="files"
style="height: 100px; scrolling: auto;" onchange="selectChange()" >
<option value=""></option>
<c:forEach var="map" items="${arcFieldList}">
<c:if test="${'FILE'==map.ARCLVL}">
<option value="${gvo.element.elementEnName}@${map.FIELD_ENNAME}"
<c:forEach var="fieldmap" items="${fileArcFieldList}">
<c:if test="${gvo.element.elementEnName==fieldmap.FILE_FIELD_ENNAME&&fieldmap.ARC_FIELD_ENNAME==map.FIELD_ENNAME}">selected="selected"</c:if>
</c:forEach>>
${map.FIELD_CHNAME}
</option>
</c:if>
</c:forEach>
</select>
</td>
当我选中一个下拉框并执行js代码后，其他的下拉框值全变了，原来空的变成有值了，原来有值的变的值不一样了。

function selectChange(file){
var files = document.getElementsByName("files");
var selectObj,options;
for(var j=1;j<=files.length;j++){
selectObj = document.getElementById("FILE" + j);
options = selectObj.options;
if(selectObj.value != file){
for(var k = 0 ; k < options.length ; k++){
selectObj.removeChild(options[k]);
}
}
}
}
这里测试的是移除一个option

Answer 1

使用javascript，获取到A下拉框选中的值，然后把BCD下拉框中等于这个值的项，修改一下属性，隐藏掉就可以了
一：javascript原生的方法
1:拿到select对象： var myselect=document.getElementById("test");
2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的value后，再获取bcd 的select对象，匹配一下值，相等的属性改成不可见
二：jquery方法（前提是已经加载了jquery库）
1:var options=$("#test option:selected"); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:同上

追问

我用这样的方试了，当我选中一个下拉框并执行js代码后，其他的下拉框值全变了，原来空的变成有值了，原来有值的变的值不一样了。还有隐藏一个option怎么写呢？

追答

隐藏option设置display：none行吗？这个我好长时间没弄了，不是很清楚

追问

请看一下问题补充上的js代码和情况说明，

Answer 2

可以用js来控制选中其中某一项，其他隐藏。
思路：当选中一个下拉框并执行js代码后，其他的下拉框值全隐藏。

<div>
<select id="dept" name="dept" class="select" style="display:none">
<option value="">请选择</option>
<%
ResultSet getDeptRs = db.executeQuery("select t.dept,t.deptname from pub_dept_manager t where unit='"+cua.getUnitCode()+"' and parentcode='"+cua.getUnitCode()+"'");
while(getDeptRs.next()){
if(keyvalue.equals(getDeptRs.getString(2)))
out.print("<option value='"+getDeptRs.getString(2)+"' selected>"+getDeptRs.getString(2)+"</option>");
else
out.print("<option value='"+getDeptRs.getString(2)+"'>"+getDeptRs.getString(2)+"</option>");
}
getDeptRs.close();
%>
</select>
</div>

<script language="JavaScript">
//查询跳转
var keyvalue = "<%=keyvalue%>";
var yearvalue = "<%=yearvalue%>";
var year ="<%=year%>";
//根据选择不同的查询条件,显示输入关键字的文本框或者下拉框
function showNext(){
if ( year =="currentyear"){
//从上个页面传过的year值不为空,且为字符串"currentyear"
yearvalue = "<%=currentYear%>";
}
var selectvalue = document.form1.field.options[document.form1.field.selectedIndex].value;
myDiv.innerHTML='<table cellpadding="0" cellspacing="0" border=0><tr><td>'
+'关键字： <input size="15" name="keyvalue" type="text" id="keyvalue" title="请输入要查找的关键字" value="'+keyvalue+'">'
+'</td><td> 年份：'
+'<input size="6" name="yearvalue" type="text" des="年份" id="yearvalue" maxlength="4" dtype=year title="请输入要查找的年份" value="'+yearvalue+'"></td>'
+'<td><a href="javascript: query();" class="main_fun_button" >查询</a></td></tr></table>';

//角色类别
if(selectvalue == "DEPTNAME"){
myDiv.innerHTML='<table cellpadding="0" cellspacing="0" border=0><tr><td>'
+'关键字：<select id="keyvalue" name="keyvalue" class="select" >'+document.all.dept.innerHTML
+'</select></td><td> 年份：'
+'<input size="10" name="yearvalue" type="text" des="年份" id="yearvalue" maxlength="4" dtype=year title="请输入要查找的年份" value="'+yearvalue+'"></td>'
+'<td><a href="javascript: query();" class="main_fun_button" >查询</a></td></tr></table>';
}
keyvalue="";
yearvalue ="";
if(document.form1.keyvalue!=null)
document.form1.keyvalue.focus();
}
</script>