JS控件隐藏显示代码

onfocus=""获取焦点触发的函数
onblur=""失去焦点时触发的函数
你只要在JS控制下拉框的显式或隐藏就行了
如
onfocus="document.getElementById('selectID').style.display='';"
onblur="document.getElementById('selectID').style.display='none;';"
selectID是你的下拉框ID

<html>
  <head>
   <body>
    <script language="javascript">

       function show(){
          document.form1.b3.style.display=""   设置""时为显示
          document.form1.b4.style.display=""
          document.form1.txt.style.display=""
       }

       function hid(){
          document.form1.b3.style.display="none"  设置"none"时为隐藏
          document.form1.b4.style.display="none"
          document.form1.txt.style.display="none"
       }

    </script>
     <form id="form1" name="form1">
        <input type="button" name="but1" value="显示" onclick="show()"/>
        <input type="button" name="but2" value="隐藏" onclick="hid()"/>
        <input type="button" name="b3" id="but3" value="Hello"/>
        <input type="button" name="b4" id="but3" value="World"/>
        <input type="text" name="txt" id="txt"/>
     </form>
   </body>
  </head>
</html>
如果要用失去或者得到焦点把代码里的onclick改为onblur或者onfocus即可。

//初始化参数,和下拉表位置
        function initPar()
        {
            txtInput =document.getElementById("txtCompanyName");
            //设置下拉表相对于文本输入框的位置
            setPosition();
        }

        //设置下拉表相对于文本输入框的位置
        function setPosition()
        {
            var width = txtInput.offsetWidth;
            var left = getLength("offsetLeft");
            var top = getLength("offsetTop") + txtInput.offsetHeight;

            divContent.style.left = left + "px";
            divContent.style.top = top + "px";
            divContent.style.width = width + "px";
        }
<body onload="initPar();">
function ShowNav(id){
    document.getElementById(id).style.display='block';//显示
}function HideNav(id){
    document.getElementById(id).style.display='none';//隐藏
}希望是你要的

方法1：<HTML>
<HEAD>
<style type="text/css"></style>
<script type="text/javascript">
var g=document.getElementById;
window.onload=function(){
        g("isMaried").style.display="none";
        g("isMaried").onblur=function() {
                this.style.display="none";
                g("sp1").style.display="";
        }
        g("sp1").onclick=function() {
                this.style.display="none";
                g("isMaried").style.display="";
        };
        g("isMaried").onchange=function() {
                g("sp1").innerHTML=this.options[this.selectedIndex].text;
        }
}
</script>
</HEAD>
<body>
婚姻状况:<span id="sp1">未婚</span><select  id='isMaried'><option>未婚</option><option>已婚</option></select></body>
</HTML>

方法2：<HTML>
<HEAD>
<style type="text/css"></style>
<script type="text/javascript">
var g=document.getElementById;
function edit() {
        var sp1=g("sp1");
        var str="<select  id='isMaried'><option>未婚</option><option "+((sp1.innerHTML=="已婚")?"selected":"")+">已婚</option></select>";
        sp1.innerHTML=str;
        g("isMaried").onblur=function() {
                sp1.innerHTML=this.options[this.selectedIndex].text;
                sp1.onclick=edit;
        }
        sp1.onclick=null;
}
window.onload=function(){
        var sp1=g("sp1");
        sp1.onclick=edit;
}
</script>
</HEAD>
<body>
婚姻状况:<span id="sp1">未婚</span>
</body>
</HTML>

select好像没有onblur事件.不知道楼主是不是这个意思
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
</HEAD> <BODY>
  <div id="testdiv"><span id="testtext" onclick="a()">点击选择值</span><span id="select1">
  <select onchange="b(this.options[this.selectedIndex].text)" >
<option>值一</option>
<option>值二</option>
</select>
  </span></div>

</BODY>
</HTML>

按4楼的改了下
<html>
  <head>
   <body>
    <script language="javascript">

       function show(){
          document.form1.txt.style.display="none"
          document.form1.sel.style.display="block"
       }

       function hid(){
          document.form1.txt.style.display="block"
          document.form1.sel.style.display="none"
       }

    </script>
     <form id="form1" name="form1">
        <input type="text" name="txt" id="txt" onfocus="show()"/>
        <select id="sel" type="select" onblur="hid()" style="display:none">
         <option value="1">aaaa</option>
         <option value="2">bbbb</option>
         <option value="3">cccc</option>
        </select>
     </form>
   </body>
  </head>
</html>

R,错了,可以绑定onblur事件<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
</HEAD> <BODY>
  <div id="testdiv"><span id="testtext" onclick="a()">点击选择值</span><span id="select1" style="display:none">
  <select onblur="b(this.options[this.selectedIndex].text)">
<option>值一</option>
<option>值二</option>
</select>
  </span></div>

</BODY>
</HTML>

就像日历控件一样对吧，foucus 时 ddl.show() blur 时，ddl.hide()

display="none" 隐藏
display="block" 显示

调试易

JS控件隐藏显示代码

解决方案 »