实现下拉框和搜索框一体功能

xiaoxiao2021-03-25 121

页面中实现下拉框和搜索框一体功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现下拉框和搜索框一体功能</title> </head> <body> <h4>这个既可以做input 又可以使用 select</h4> <div style="position: relative;" class="form-control"> <span style="margin-left: 100px; width: 50%; overflow: hidden;"> <select name="faultDiscription" style="width:50%; margin-left: -100px;" id="selected_"> <option value="27">1</option> <option value="23">2</option> <option value="25">3</option> <option value="13">4</option> <option value="24">5</option> <option value="4">6</option> <option value="5">7</option> <option value="26">8</option> <option value="21">9</option> <option value="10">10</option> <option value="12">11</option> <option value="11">12</option> </select> </span> <input id="faultDiscription" name="box" style="width: 45%; position: absolute; left: 0px; padding: 0 12px;"> </div> <script src="jquery.js"></script> <script> /*取消默认初始化的时候默认选择第一个option选项*/ //当选择下拉按钮时让选择的项在input 框显示 $("#selected_").change(function(){ var aa=$("#selected_ option:selected").text(); $("#faultDiscription").val(aa); }); $('#selected_')[0].selectedIndex = -1; </script> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-12756.html

技术

最新回复(0)