关于JavaScript点击触发上拉框

2012-08-11

关于JavaScript点击触发下拉框就像QQ个人信息里血型那一项，上面显示了你之前填写的血型（比如：O型），现在我

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

[解决办法]
双击文本，把文本的内容取出来，生成一个下拉框，给下拉框赋值，选择以后把下拉框隐藏或者从页面移除，返回值重新赋给文本框
[解决办法]
应该是这样吧~ 当单击文本框的时候把文本框的数值读取出来,然后让隐藏的下拉列表框显示,把文本框的值赋给下拉别表,把文本框隐藏,也可以生成出新的下拉列表框,隐藏文本框,但是建议之前就做好下拉列表,因为血型就那么几个,没必要做生成的. 这样就可以出现下拉列表了, 当下拉列表的值发生改变的时候在做一次赋值到文本框,隐藏下拉列表,在显示文本框就OK了~

探讨

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

[解决办法]
<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();
}

[解决办法]

HTML code

<!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>
[解决办法]
这样？
HTML code<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()">

热点排行