Select标签与input标签结合使用

最新推荐文章于 2024-04-17 16:32:38 发布

小丶柚子

最新推荐文章于 2024-04-17 16:32:38 发布

阅读量5.4k

点赞数

分类专栏： H5 文章标签： javascript

本文链接：https://blog.csdn.net/ma15991375491/article/details/105204048

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来视图：
在这里插入图片描述
直接上代码：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">

<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<body>
<span style="width: 80px;">年</span>
<div style=" width: 200px; padding:5px ;position:relative;height: 50px;" >
    <span style="position:absolute;top:5px;overflow:hidden;width:95%;height:32px;">
        <!--这个是个多选框，用onchange事件的时候 ，将这个select的id传进去-->
               <select name="year" id="select_year" style="width: 100%;height:30px;outline:0;" onchange="qlcTrainYear(this)">
                   <option value="请选择">请选择</option>
                      <option value="未知">未知</option>
                   <option value="请输入年">请输入年</option>
               </select>

    </span>
    <!---->
    <span style="position:absolute;top:7px;left:10px;margin-top:1px;margin-left:1px;width:120px;height:28px;border-radius:5px;">
        <!--这里是input框，定位到select的上面-->
              <input type="text" id="input_year"  placeholder="请选择" style="width:80%;height:24px;border:0pt;border-radius:5px;outline:0">
    </span>
</div>
<span style="width: 80px;">月</span>
<div style=" width: 200px; padding:5px ;position:relative;height: 50px;" >
    <span style="position:absolute;top:5px;overflow:hidden;width:95%;height:32px;">
        <!--这个是个多选框，用onchange事件的时候 ，将这个select的id传进去-->
               <select name="month"  id="select_month" style="width: 100%;height:30px;outline:0;" onchange="qlcTrainMonth(this)">
                 <option value="请选择">请选择</option>
                  <option value="未知">未知</option>
                   <option value="请输入月">请输入月</option>
               </select>

    </span>
    <!---->
    <span style="position:absolute;top:7px;left:10px;margin-top:1px;margin-left:1px;width:80%;height:28px;border-radius:5px;">
        <!--这里是input框，定位到select的上面-->
              <input type="text" id="input_month"  placeholder="请选择" style="width:80%;height:24px;border:0pt;border-radius:5px;outline:0">
    </span>
</div>
<span style="width: 80px;">月</span>
<div style=" width: 200px; padding:5px ;position:relative;height: 50px;" >
    <span style="position:absolute;top:5px;overflow:hidden;width:95%;height:32px;">
        <!--这个是个多选框，用onchange事件的时候 ，将这个select的id传进去-->
               <select name="day" id="select_day" style="width: 100%;height:30px;outline:0;" onchange="qlcTrainDay(this)">
          <option value="请选择">请选择</option>
                 <option value="未知">未知</option>
                   <option value="请输入日">请输入日</option>
               </select>

    </span>
    <!---->
    <span style="position:absolute;top:7px;left:10px;margin-top:1px;margin-left:1px;width:80%;height:28px;border-radius:5px;">
        <!--这里是input框，定位到select的上面-->
              <input type="text" id="input_day"  placeholder="请选择" style="width:80%;height:24px;border:0pt;border-radius:5px;outline:0">
    </span>
</div>
<script>
    var select_year = document.getElementById("select_year");
    var select_month = document.getElementById("select_month");
    var select_day = document.getElementById("select_day");

    <!--将select的值赋给input框-->
    function qlcTrainYear(obj) {

        if(obj.value == "请输入年"){
            document.getElementById("input_year").value = "";
            document.getElementById("input_year").readOnly = false;
            document.getElementById("input_year").setAttribute( "placeholder","请输入年");
            select_month.options.length = 0;
            select_day.options.length = 0;
            select_day.options.add(new Option("请选择", "请选择"));
            select_month.options.add(new Option("请选择", "请选择"));
            select_month.options.add(new Option("未知", "未知"));
            select_month.options.add(new Option("请输入月", "请输入月"));
        }else if(obj.value == "请选择"){
            select_month.options.length = 0;
            select_day.options.length = 0;
            document.getElementById("input_year").readOnly = true;
            document.getElementById("input_year").value = "请选择";
            document.getElementById("input_month").value = "请选择";
            document.getElementById("input_day").value = "请选择";
            document.getElementById("input_month").readOnly = true;
            document.getElementById("input_day").readOnly = true;
            select_month.options.add(new Option("请选择", "请选择"));
            select_day.options.add(new Option("请选择", "请选择"));
        }else {
            //未知
            select_month.options.length = 0;
            select_day.options.length = 0;
            select_day.options.add(new Option("请选择", "请选择"));
            select_month.options.add(new Option("请选择", "请选择"));
            select_month.options.add(new Option("未知", "未知"));
            select_month.options.add(new Option("请输入月", "请输入月"));
            document.getElementById("input_year").value= obj.value;
            document.getElementById("input_year").readOnly = true;
        }
    }
    function qlcTrainMonth(obj) {
        if(obj.value == "请输入月"){
            document.getElementById("input_month").value = "";
            document.getElementById("input_month").readOnly = false;
            document.getElementById("input_month").setAttribute( "placeholder","请输入月");
            select_day.options.length = 0;
            select_day.options.add(new Option("请选择", "请选择"));
            select_day.options.add(new Option("未知", "未知"));
            select_day.options.add(new Option("请输入日", "请输入日"));
        }else if(obj.value == "请选择"){
            select_day.options.length = 0;
            document.getElementById("input_month").readOnly = true;
            document.getElementById("input_day").readOnly = true;
            document.getElementById("input_day").value = "请选择";
            document.getElementById("input_month").value = "请选择";
            select_day.options.add(new Option("请选择", "请选择"));
        }else {
            //未知
            select_day.options.length = 0;
            select_day.options.add(new Option("请选择", "请选择"));
            select_day.options.add(new Option("未知", "未知"));
            select_day.options.add(new Option("请输入日", "请输入日"));
            document.getElementById("input_month").value= obj.value;
            document.getElementById("input_month").readOnly = true;
        }
    }
    function qlcTrainDay(obj) {
        if(obj.value == "请输入日"){
            document.getElementById("input_day").value = "";
            document.getElementById("input_day").readOnly = false;
            document.getElementById("input_day").setAttribute( "placeholder","请输入日");
        }else if(obj.value == "请选择"){
            document.getElementById("input_day").readOnly = true;
            document.getElementById("input_day").value = "请选择";
        }else {
            //未知
            document.getElementById("input_day").value= obj.value;
            document.getElementById("input_day").readOnly = true;
        }
    }

</script>


</body>
</html>

小丶柚子

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Select标签与input标签结合使用

先来视图：直接上代码：<!DOCTYPE html><html><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫