关于JavaScript点击触发下拉框

hjxenjoy 2011-09-01 02:27:51

就像QQ个人信息里血型那一项，上面显示了你之前填写的血型（比如：O型），现在我要修改，但不想手动填写，想通过点击文本框就触发生成一个下拉框，从过下拉框选择，怎么做？

...全文

478 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

wojiushiaiqt 2012-07-18

打赏
举报

看看8楼

hjxenjoy 2011-09-01

打赏
举报

哇，8楼，就是8楼的效果！
11楼的也不错，不过不是直接在文本框下面直接出现下拉的，呵呵。
谢谢啦。

一起混吧 2011-09-01

打赏
举报

这样？



<script>

function createSelect()

{

  var mySelect = document.createElement("select"); 

  mySelect.id = "mySelect"; 

  mySelect.onchange=function(){document.getElementById("blood").value=this.value}

  document.body.appendChild(mySelect);

  addOption(); 

}



function addOption()

{

  var obj=document.getElementById('mySelect');

  obj.options[obj.options.length] = new Option("-请选择血型-","-1"); 

  obj.options[obj.options.length] = new Option("B型","B型"); 

  obj.options[obj.options.length] = new Option("O型","O型");

  obj.options[obj.options.length] = new Option("AB型","AB型");  

}

</script> 



血型：<input type="text" id="blood" name="blood" value="A型" onfocus="createSelect()">

hjxenjoy 2011-09-01

打赏
举报

唉，Jquery我是一点也不懂啊

應燁軍 2011-09-01

打赏
举报

不知道是是不是LZ你要的效果...

應燁軍 2011-09-01

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //纯js版



        window.onload = function () {

            var selBloodType = document.getElementById("selBloodType"); //$("#selBloodType");

            var txtBloodType = document.getElementById("txtBloodType"); //$("#txtBloodType");

            //显示血型下拉框

            txtBloodType.onclick = function () {

                selBloodType.style.display = "";

            }

            //血型下拉框选择项改变时 

            selBloodType.onchange = function () {

                txtBloodType.value = selBloodType.options[selBloodType.selectedIndex].value; ;

                selBloodType.style.display = "none";

            }

        }       

    </script>

</head>

<body>

    <div>

        <input type="text" id="txtBloodType" style="width: 100px" />

        <div>

            <!--  这里的select 要使用multiple模式 否则无法自动展开-->

            <select id="selBloodType" style="display: none; width: 100px" multiple="multiple" size="4">

                <option value="A">A</option>

                <option value="B">B</option>

                <option value="AV">AV</option>

                <option value="H1">H1</option>

                <option value="H2">H2</option>

            </select>

        </div>

    </div>

</body>

</html>

應燁軍 2011-09-01

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {



            var selBloodType = $("#selBloodType");

            var txtBloodType = $("#txtBloodType");

            //显示血型下拉框

            txtBloodType.click(function () {

                selBloodType.show();

            });

            //血型下拉框选择项改变时 

            selBloodType.change(function () {

                txtBloodType.val($(this).val());

                selBloodType.hide();

            });

        });

        

    </script>

</head>

<body>

    <div>

        <input type="text" id="txtBloodType" style="width: 100px" />

        <div>

            <!--  这里的select 要使用multiple模式 否则无法自动展开-->

            <select id="selBloodType" style="display: none; width: 100px" multiple="multiple" size="4">

                <option value="A">A</option>

                <option value="B">B</option>

                <option value="AV">AV</option>

                <option value="H1">H1</option>

                <option value="H2">H2</option>

            </select>

        </div>

    </div>

</body>

</html>

hjxenjoy 2011-09-01

打赏
举报

上面是Jquery么，看不懂，没纯Javascript的么

小辛、 2011-09-01

打赏
举报

<input type="text" id="text1" onchange="changeText">
<selete id="selete1" style=" display:none" onchange="changeSelete">

function changeText(){
$("#selete1").val($("#text1").val());
$("#text1").hide();$("#selete1").show();

}

function changeSelete()
{
$("#text1").val($("#selete1").val());
$("#selete1").hide();$("#text1").show();
}

十四月的清晨 2011-09-01

打赏
举报

直接下拉框不久好了么，为什么要用文本框？

hjxenjoy 2011-09-01

打赏
举报

额，没有代码可以展示下么，对于Javascript怎么生成下拉框我也不知道怎么做啊

小辛、 2011-09-01

打赏
举报

应该是这样吧~ 当单击文本框的时候把文本框的数值读取出来,然后让隐藏的下拉列表框显示,把文本框的值赋给下拉别表,把文本框隐藏,也可以生成出新的下拉列表框,隐藏文本框,但是建议之前就做好下拉列表,因为血型就那么几个,没必要做生成的. 这样就可以出现下拉列表了, 当下拉列表的值发生改变的时候在做一次赋值到文本框,隐藏下拉列表,在显示文本框就OK了~

[Quote=引用 1 楼 tornado6643 的回复:]

双击文本，把文本的内容取出来，生成一个下拉框，给下拉框赋值，选择以后把下拉框隐藏或者从页面移除，返回值重新赋给文本框
[/Quote]