js单击下拉框双击变输入框

JavaScript020

js单击下拉框双击变输入框,第1张

select 好像不响应双击事件;

建议用右键代替双击:

<script>

function show()

{ var a=document.getElementById("div1")

if (event.button==2)

{a.style.display=a.style.display=="none"?"":"none"

}

}

</script>

<select onmousedown="show()">

<option>aaaa</option>

<option>bbb</option>

<option>ccc</option>

<option>dddd</option>

</select>

<div id="div1" style="display:none">

<textarea ></textarea>

</div>

尝试如下代码,在 Friefox 54 及 IE 11 下测试可行

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="checkbox" id="checkbox1" value="跑步"> 跑步 

        <input type="checkbox" id="checkbox2" value="打球"> 打球  

        <input type="checkbox" id="checkbox3" value="登山"> 登山  

        <input type="checkbox" id="checkbox4" value="游泳"> 游泳

        <input type="checkbox" id="checkbox5" value="骑车"> 骑车

        <div id="div1">

        </div>

    </body>

    <script>

        var objdiv = document.getElementById('div1')

        for(i=1 i<6 ++i) {

            var objchk = document.getElementById('checkbox' + i)

            objchk.addEventListener('click', function(e) {

                //获取当前正在点击的 Checkbox对象

                var objchk = e.target        

                //获取已生成的 Input 对象

                var objipt_exist = document.getElementById('ipt' + objchk.id)

                if(objchk.checked) {

                    //如果 Checkbox 选中状态下对应的 Input 已存在,就返回,以防重复添加Input

                    if(objipt_exist) {

                        return

                    }

                    //如果文本框不存在,在 div1 容器中动态添加 Input

                    var objipt = document.createElement('input')

                    objipt.setAttribute('value', objchk.value)

                    objipt.setAttribute('id', 'ipt' + objchk.id)

                    objdiv.appendChild(objipt)

                } else {

                    //从div1中移除已存在的 Input

                    objdiv.removeChild(objipt_exist)

                }

            }, false)

        }

    </script>

</html>

java和javascript这两个不能混为一谈吧 不过可以说说:最常见的方法是,所有的下拉列表的数据都是固定死了的,写到js的数组里,然后用js来实现,这方面的js代码相当多,这就是纯js实现的.如果数据是动态的,需要先组装成list再配合js调用......