这个东西怎么实现？点input框，然后再弹出来的列表选择

Question

本帖最后由 neosmemory 于 2011-05-26 20:15:31 编辑

Answer 1

http://blog.csdn.net/xielingxu/archive/2007/08/26/1759465.aspx

Answer 2

其实这种实现方式有很多种，如果只要静态页面实现效果的话那更简单了
你先将显示省市的div隐藏，然后在input里面加个onclick事件，将div的display改为block
获取input的绝对位置，将div显示在该位置下面，具体效果要自己慢慢调，最主要的注意点就是
选择div里每个省市的时候可以将该省市传入input中，并把对应的id编号传入对应的hidden作
用域中，你可以将div中的布局改为table布局，没个td的id作为所需要传入hidden作用域的id
td的innerText作为传入input的值，给每个有省市的td加上onclick事件，点击后将id和innerText
传入对应标签，然后关闭层

Answer 3

<script>
        function $(id) {
            return document.getElementById(id);
        }
        //显示民族div
        function showdiv(divid) {
            //获取到民族div
            $(divid).style.display = "block";
            //设置上边距
            $(divid).style.top = window.event.clientY + "px";
            $(divid).style.left = (window.event.clientX + 50) + "px";
        }
        //验证单选框
        function validRadio(name) {
            //获取到所有的单选框，循环判断每个单选框是否选中
            var sexs = document.getElementsByName(name);
            var returnvalue = "";
            for (var i = 0; i < sexs.length; i++) {
                if (sexs[i].checked) {
                    returnvalue = sexs[i].value;
                    break;
                }
            }
            return returnvalue;
        }
        //民族的确定按钮
        function setvalue() {
            //先判断是否有选中民族
            var reval = validRadio("jg1");
            if (reval == "") {
                alert("民族不能为空！");
                return false;
            }
            else {
                $("mz").value = reval;
                //隐藏div;
                $("jg").style.display = "none";
            }
        }
    </script> 民族：<input id="mz" type="text" class="input" size="9" onclick="showdiv('jg')" />点击文本框进行选择    <div id="jg" style="position: absolute; width: 250px; height: 120px; z-index: 1;
        border: solid 1px #B1DE27; background-color: #FFFFFF; display: none; top: 320px;
        left: 450px">
        <div style="width: 250px; height: 22px; background-color: #CCCCCC">
            <a onclick="document.getElementById('jg').style.display='none'" title="关闭" style="cursor: pointer;
                float: right; margin-top: 3px; display: inline;">×</a>
        </div>
        <div style="padding: 4px; border-top: 0px; padding-bottom: 8px; display: block; padding-top: 0px;
            padding-left: 5px;">
            <input type="radio" value="汉族" name="jg1" />汉族<input type="radio" name="jg1" value="维吾尔族" />维吾尔族<input
                type="radio" name="jg1" value="朝鲜族" />朝鲜族<input type="radio" name="jg1" value="白族" />白族<br />
            <input name="jg1" type="radio" value="满族" />满族<input name="jg1" type="radio" value="苗族" />苗族<input
                name="jg1" type="radio" value="回族" />回族<input type="radio" name="jg1" value="白族" />白族<br />
            <input type="radio" name="jg1" value="藏族" />藏族<input type="radio" name="jg1" value="羌族" />羌族<input
                name="jg1" type="radio" value="壮族" />壮族<input type="radio" value="傣族" name="jg1" />傣族<br />
        </div>
        <div align="center">
            <input type="button" onclick="setvalue();" value="确定" />&nbsp;<input type="button"
                value="关闭" onclick="document.getElementById('jg').style.display='none'" /></div>
    </div>
    

Answer 4

这个就是div层,嵌套来处理,具体的网上有很多例子的