jsp:name属性和下拉框的option的值关联在一起

最新推荐文章于 2023-10-27 21:15:27 发布

ご小学生

最新推荐文章于 2023-10-27 21:15:27 发布

阅读量500

点赞数

分类专栏： js option

本文链接：https://blog.csdn.net/weixin_44357646/article/details/109262542

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

option

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何创建一个前端交互表单，包括输入框和下拉菜单，用于图书搜索。用户可以输入书名，同时下拉菜单提供了多种搜索条件选择，如书名、价格、作者和ID。JavaScript代码实现了下拉菜单选择时动态更新输入框的搜索参数，提高了用户体验。

摘要由CSDN通过智能技术生成

表单：

</div>
<form class="form-inline" action="/user/getBookByExample" method="get">
    <div class="pform-group mb-2">
        <input tye="text" readonly class="form-control-plaintext" id="staticEmail2" value="请输入要查询的书籍：">
    </div>
    <div class="form-group mx-sm-3 mb-2">
        <input id="my-input" type="text" class="form-control" name="bookName"  placeholder="霸道总裁">
    </div>
    <button type="submit" class="btn btn-primary mb-2">搜索图书</button>
</form>

下拉框

<div class="form-inline">
    <select id="my-select" class="form-control">
        <option  value="bookName">根据书名搜索</option>
        <option  value ="bookPrice">根据价格搜索</option>
        <option  value ="bookWriter">根据作者搜索</option>
        <option  value="bookId">根据书本id搜索</option>
    </select>
</div>

js实现绑定

<script type="text/javascript">
    let mySelect = document.querySelector("#my-select")
    let myInput = document.querySelector("#my-input")
    mySelect.addEventListener("change",(e) => {
        myInput.name = e.target.value
    })
</script>