选择框可以同时输入和选择选项

最新推荐文章于 2024-09-03 15:21:13 发布

sz_09

最新推荐文章于 2024-09-03 15:21:13 发布

阅读量3.4k

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/sz_09/article/details/81101624

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<li>
                           <p class="address">校区</p>
                           <div class="addresschoice">
                               <span class="addressel">
                      <select name="address" οnchange="qlcTrainS('cho_adr1')" id="cho_adr1">
                      <option value="test1">央音校区：西城区闹市口大街9号院3号楼103</option>
                      <option value="test2">太阳宫校区：朝阳区太阳宫凯德Mall三层07</option>
                      <option value="test3">长楹天街校区：朝阳区龙湖长楹天街购物中心西区三层34</option>
                      </select>

                           </span>
                           <span class="addessinp">
                           <input type="text" name="ccdd" id="cho_adr" class="ccdd" placeholder="输入或选择区域">
                           </span>
                           </div>
                           <span id="" class="errortit">*格式错误</span>
                           <span id="" class="errortit">*不能为空</span>
                       </li>

/*将select的值赋给input框*/
   function qlcTrainS(idName) {
   var arrValue=document.getElementById(idName).options[document.getElementById(idName).selectedIndex].value;
   $("#"+idName+"").parent('span').next('span').children('input.ccdd').val(arrValue);
   }

.addresschoice{
   width: 186px;
   height: 32px;
   position: relative;
   margin-left: 90px;
}
.addrespan{
   position:absolute;
   top:0;
   overflow:hidden;
   width:95%;
   height:32px;
}
#cho_adr1{
   width:100%;
   height:32px;
   outline:0;
   border-radius:8px ;
}
.addessinp{
   position:absolute;
   top:1px;
   left:5px;
   width:80%;
   height:32px;
   border-radius:5px;
}
#cho_adr{
   width:80%;
   height:30px;
   border:0pt;
   border-radius:5px;
   outline:0;
}