关于JavaScript点击触发上拉框

关于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

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;script src="../jquery/jquery-1.5.2.min.js" type="text/javascript"&gt;&lt;/script&gt;    &lt;script type="text/javascript"&gt;        //纯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";            }        }           &lt;/script&gt;&lt;/head&gt;&lt;body&gt;    &lt;div&gt;        &lt;input type="text" id="txtBloodType" style="width: 100px" /&gt;        &lt;div&gt;            &lt;!--  这里的select 要使用multiple模式 否则无法自动展开--&gt;            &lt;select id="selBloodType" style="display: none; width: 100px" multiple="multiple" size="4"&gt;                &lt;option value="A"&gt;A&lt;/option&gt;                &lt;option value="B"&gt;B&lt;/option&gt;                &lt;option value="AV"&gt;AV&lt;/option&gt;                &lt;option value="H1"&gt;H1&lt;/option&gt;                &lt;option value="H2"&gt;H2&lt;/option&gt;            &lt;/select&gt;        &lt;/div&gt;    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
[解决办法]
这样？
HTML code&lt;script&gt;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型");  }&lt;/script&gt; 血型：&lt;input type="text" id="blood" name="blood" value="A型" onfocus="createSelect()"&gt;

关于JavaScript点击触发上拉框

热点推荐