关于JavaScript点击触发上拉框-JavaSript-爱易网页

关于JavaScript点击触发上拉框

日期：2014-05-16　浏览次数：20486 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

关于JavaScript点击触发上拉框

相关资料更多>

推荐阅读更多>