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

最新推荐文章于 2025-11-03 09:39:28 发布

原创最新推荐文章于 2025-11-03 09:39:28 发布 · 8.5k 阅读

2 ·

CC 4.0 BY-SA版权

常见问题tips 专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何在HTML页面中创建一个同时具备下拉框和搜索框功能的元素。通过CSS定位和JavaScript事件监听，实现了在下拉框选择后，搜索框自动填充所选内容的效果。

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

<!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>