关于JavaScript点击触发下拉框

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

额，没有代码可以展示下么，对于Javascript怎么生成下拉框我也不知道怎么做啊
<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();
}
上面是Jquery么，看不懂，没纯Javascript的么
<!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 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>
<!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 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>
这样？<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()">