求复选框下拉效果JS代码

[z250054613]

　 　 各位高手们，小弟java不熟，现在做项目遇到排版问题。复选框默认一个很大的框，很占地方，排版效果很难看，如果把复选框长和高固定死，下拉很难看。

　 　 我希望把复选框改变成单选框那样，需要选择时，点击右边的下拉按钮，下拉出一个框，选好后收起来。

　 　 注意：1.我要的是像单选框那样的下拉效果，不是边框的下拉框；
　 　 　 　 2.我的问题比较特殊，不像网页上修改一个属性就可以实现的；
　 　 　 　 3.最好是JS代码。

　 　 最后感谢各位大侠帮忙！ ＾＿＾

[haiercs]

1.我要的是像单选框那样的下拉效果，不是边框的下拉框；
不明白，单选框下拉效果是什么样的

[zyw_205]

不明白你说的是什么效果

[z250054613]

[Quote=引用 2 楼 的回复:]

不明白你说的是什么效果
[/Quote] 就是让复选框不占地方，需要选择时点击右边的三角形弹出下拉框，选好后收起来

[haiercs]

能否用多选的下拉列表代替呢

[z250054613]

[Quote=引用 4 楼 的回复:]

能否用多选的下拉列表代替呢
[/Quote] 不行，下拉列表还是占地方啊，我需要排版，csdn回复不能插入图片，郁闷啊。就像EXCEL的选择UI那样，要选择时，点击弹出选择框，选好后收起来。那样的效果

[haiercs]

基本明白你的意思，那要么搞个三角形的图片，做个点击事件，搞个div出来，然后确定好后（这个确定好可以为鼠标离开这个div区域或者div里面有个确定按钮，鼠标点击确定按钮），div隐藏

[D_lady]

把你的复选框放在一个层中设置这个层的的style="display:none"(默认看不见)
给你‘右边的三角形’一个onclick事件,onclick=isDisplay()
function isDisplay(){
if(doucument.getElementById("复选框所在层的id").style.disable="none"){
doucument.getElementById("复选框所在层的id").style.disable="block"; //是隐藏状态则设置显示
}else{
doucument.getElementById("复选框所在层的id").style.disable="none"; //是显示状态则设置隐藏
}

}
另外，javascript和java一点关系也没有，js是js，java是java

[D_lady]

修正以上代码，display 写成disable了 汗。。。。
把你的复选框放在一个层中设置这个层的的style="display:none"(默认看不见)
给你‘右边的三角形’一个onclick事件,onclick=isDisplay()
function isDisplay(){
if(doucument.getElementById("复选框所在层的id").style.display="none"){
doucument.getElementById("复选框所在层的id").style.display="block"; //是隐藏状态则设置显示
}else{
doucument.getElementById("复选框所在层的id").style.display="none"; //是显示状态则设置隐藏
}

}
另外，javascript和java一点关系也没有，js是js，java是java

[z250054613]

[Quote=引用 8 楼 的回复:]

修正以上代码，display 写成disable了 汗。。。。
把你的复选框放在一个层中设置这个层的的style="display:none"(默认看不见)
给你‘右边的三角形’一个onclick事件,onclick=isDisplay()
function isDisplay(){
if(doucument.getElementById("复选框所在层的id").style.……
[/Quote]说了你别笑我啊，我对JS真的一窍不通。我看了半天代码，如果我是做web，可能我可以试一下，可是我的项目不一样，一个BI软件，能在里面添加html代码，我通常是写JS代码，只用到复选框的名字。

[z250054613]

[Quote=引用 9 楼 的回复:]

引用 8 楼 的回复:

修正以上代码，display 写成disable了 汗。。。。
把你的复选框放在一个层中设置这个层的的style="display:none"(默认看不见)
给你‘右边的三角形’一个onclick事件,onclick=isDisplay()
function isDisplay(){
if(doucument.getElementById("复选框所在层……
[/Quote]你熟悉XML吗？下面是一个简单的XML代码，看看怎么实现
<report xmlns="http://developer.cognos.com/schemas/report/8.0/" useStyleVersion="10" expressionLocale="zh-cn">
<modelPath>/content/folder[@name='packages']/folder[@name='000DB_kidswant']/folder[@name='销售']/package[@name='销售分析']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="页面1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><table><style><defaultStyles><defaultStyle refStyle="tb"/></defaultStyles><CSS value="border-collapse:collapse;width:100%"/></style><tableRows><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents><textItem><dataSource><staticValue>品类：</staticValue></dataSource></textItem><selectValue parameter="参数1" refQuery="查询1" name="form1" multiSelect="true" hideAdornments="true" selectValueUI="listBox"><useItem refDataItem="CATEGORYITEMCODEONE"><displayItem refDataItem="CATEGORYITEMNAMEONE"/></useItem><style><CSS value="width:120px;height:100px"/></style></selectValue><HTMLItem>
<dataSource>
<staticValue><script>
var form = getFormWarpRequest();
var dropDown = form._oLstChoicesform1;
dropDown.remove(1);
dropDown.remove(0);
dropDown.removeAttribute("hasLabel");
</script>
</staticValue>
</dataSource>
</HTMLItem></contents></tableCell><tableCell><contents/></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents/></tableCell><tableCell><contents/></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents/></tableCell><tableCell><contents/></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents/></tableCell><tableCell><contents/></tableCell></tableCells></tableRow><tableRow><tableCells><tableCell><contents/></tableCell><tableCell><contents/></tableCell><tableCell><contents/></tableCell></tableCells></tableRow></tableRows></table></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/><XMLAttribute name="RS_modelModificationTime" value="2012-07-13T09:01:35.968Z" output="no"/></XMLAttributes><queries><query name="查询1">
<source>
<model/>
</source>
<selection><dataItem name="CATEGORYITEMCODEONE" aggregate="none" rollupAggregate="none"><expression>[维度信息].[TD_E_SALE_GOODS_CATEGORY].[CATEGORYITEMCODEONE]</expression><XMLAttributes><XMLAttribute name="RS_dataType" value="3" output="no"/><XMLAttribute name="RS_dataUsage" value="unknown" output="no"/></XMLAttributes></dataItem><dataItem name="CATEGORYITEMNAMEONE" aggregate="none" rollupAggregate="none"><expression>[维度信息].[TD_E_SALE_GOODS_CATEGORY].[CATEGORYITEMNAMEONE]</expression><XMLAttributes><XMLAttribute name="RS_dataType" value="3" output="no"/><XMLAttribute name="RS_dataUsage" value="unknown" output="no"/></XMLAttributes></dataItem></selection>
</query></queries></report>

[D_lady]

[Quote=引用 10 楼 的回复:]

引用 9 楼 的回复:

引用 8 楼 的回复:

修正以上代码，display 写成disable了 汗。。。。
把你的复选框放在一个层中设置这个层的的style="display:none"(默认看不见)
给你‘右边的三角形’一个onclick事件,onclick=isDisplay()
function isDisplay(){
if(doucument.getEle……
[/Quote]

这个，我帮不了你了，你可以贴图把问题说的更详细些请高手看看，
提示：把图片上传到你的csdn空间，然后右键你的图片“复制图片地址”再插入图片时粘贴图片地址就可以了