<script type="text/javascript"> // 将头像下拉框动态展示 $('.header .top-head .user-wrap .avatar').mouseenter(function () { $('.header .top-head .user-wrap ul').css('display', 'block'); }) $('.header .top-head .user-wrap .avatar').mouseleave(function () { $('.header .top-head .user-wrap ul').css('display', 'none'); }) // 赋予点击操作 $('#3').click(function () { // 清空登录时存到sessionStorage里面的值 sessionStorage.removeItem('user'); location.href = 'login.html' }); layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () { var laydate = layui.laydate //日期 , layer = layui.layer //弹层 $('#2').click(function () { xadmin.open('修改密码', 'user-editPwd.html', 550, 350) }); $('#1').click(function () { xadmin.open('修改个人信息', 'user-edit.html', 560, 350) }); }); </script> <script> $("#search-btn").click(function () { var bTitle = $('#bTitle').val() console.log(bTitle) $.ajax({ url: "http://127.0.0.1:8001/front/frSearch" , type: "get" , data: { 'bTitle': bTitle } , success: function (datas) { console.log(datas) var storage = window.sessionStorage; // 想要用sessionStorage存储对象,必须先将对象转化为json字符串 var json = JSON.stringify(datas.data); storage.setItem('searchByBTitle', json); location.href = 'search.html' } }); }); </script>这段代码哪里提交的表单
时间: 2024-01-23 15:02:40 浏览: 38
这段代码并没有直接提交表单,但是它包含了一个点击事件的监听器,当点击id为"search-btn"的元素时,会执行一个AJAX请求。在该请求中,通过GET方法将表单中id为"bTitle"的值作为参数传递给后端接口:
```javascript
$.ajax({
url: "http://127.0.0.1:8001/front/frSearch",
type: "get",
data: { 'bTitle': bTitle },
success: function (datas) {
// ...
}
});
```
这段代码的作用是在点击"search-btn"元素时,发送一个GET请求到"http://127.0.0.1:8001/front/frSearch"接口,并将表单中id为"bTitle"的值作为参数传递给后端。成功获取响应后,会执行success回调函数中的代码。根据代码逻辑,这个请求可能用于搜索书籍标题相关的内容,并将返回结果存储到sessionStorage中,并跳转到"search.html"页面。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js下拉框三级联动菜单选择代码</title> <link rel="stylesheet" type="text/css" href="css/layui.css"> <link rel="stylesheet" type="text/css" href="css/mycss.css"> </head> <body class="layui-bg-black"> <div id="box"> <img src="img/sf.png" > <select class="layui-form-label" id="form1" > <option>请选择省份</option> </select> <img src="img/cs.png" > <select class="layui-form-label" id="form2"> <option>请选择城市</option> </select> <img src="./img/qy.png" > <select class="layui-form-label" id="form3"> <option>请选择地区</option> </select> <h1>详细地址</h1> <div class="layui-form-item layui-form-text"> <div class="layui-input-block"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea" id="text"></textarea> </div> </div> <button type="button" class="layui-btn layui-btn-normal" id="btn">提交</button> </div> <script src="js/data.js" type="text/javascript" charset="utf-8"></script> <script src="js/myjs.js" type="text/javascript" charset="utf-8"></script> </body> </html>
这是一个HTML文件,其中包含一个下拉框三级联动菜单和一个提交按钮。在这个HTML文件中,使用了LayUI框架来美化页面,并且引入了两个JavaScript文件:data.js和myjs.js。其中,data.js包含了省份、城市和地区的数据,myjs.js包含了JavaScript代码来实现下拉框三级联动菜单和提交按钮的功能。
<select name="pages"> <option value="/pages/index/">小程序二维码</option> <option value="/pages/admin/index?sign_type=store_sign_in">签到二维码</option> </select>改为好看的下拉框样式
要将上述的 `<select>` 下拉框样式改为好看的样式,您可以使用自定义样式或者使用一些开源的下拉框插件。以下是一种常见的改进样式,使用CSS和JavaScript来实现:
HTML代码:
```html
<div class="custom-select">
<select name="pages">
<option value="/pages/index/">小程序二维码</option>
<option value="/pages/admin/index?sign_type=store_sign_in">签到二维码</option>
</select>
<span class="custom-arrow"></span>
</div>
```
CSS代码:
```css
.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 14px;
}
.custom-select .custom-arrow {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-left: 2px solid #999;
border-bottom: 2px solid #999;
transition: all 0.3s ease;
}
.custom-select select:focus + .custom-arrow {
transform: translateY(-50%) rotate(-135deg);
}
.custom-select select option {
background-color: #fff;
}
```
这段代码会将原本的下拉框样式进行了自定义,添加了箭头图标,并通过CSS样式来改变选中状态下的样式。您可以根据需要进行样式的调整,使其更加符合您的设计要求。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> </head> <body> 首页 登记数据 查询数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label for="line">确认线别:</label> <input name="line" class="layui-input" placeholder="请选择线别" /> <label for="date">确认日期:</label> <input type="date" name="date" id="date" /> <label for="model">异常机种:</label> <input type="text" name="model" id="model" placeholder="请输入机种"/> <label for="prod_line">异常现象:</label> <input type="text" name="prod_line" id="prod_line" placeholder="请输入现象"> <label for="prod_date">生产日期:</label> <input type="date" name="prod_date" id="prod_date"> <label for="shift">生产班别:</label> <select name="shift" id="shift"> <option value="白班">白班</option> <option value="夜班">夜班</option> </select> <label for="prod_line_2">生产线别:</label> <input type="text" name="prod_line_2" id="prod_line_2"> <label for="responsible">责任人:</label> <input type="text" name="responsible" id="responsible" placeholder="请输入责任人"> <button type="submit">提交</button> </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .mi { position: relative; width: 223px; margin: 100px auto; } .mi input { width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; } .mi .search { border: 1px solid #ff6700; } .result-list { display: none; position: absolute; left: 0; top: 48px; width: 223px; border: 1px solid #ff6700; border-top: 0; background: #fff; } .result-list a { display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover { background-color: #eee; } </style> </head> <body> <input type="search" placeholder="小米笔记本" /> 全部商品 小米11 小米10S 小米笔记本 小米手机 黑鲨4 空调 <script> // 获取元素 const input = document.querySelector("[type=search]"); const ul = document.querySelector(".result-list"); // 监听事件 获取焦点 input.addEventListener("focus", function () { ul.style.display = "block"; // 添加一个带有颜色边框的类名 input.classList.add("search"); }); // 监听事件 失去焦点 input.addEventListener("blur", function () { ul.style.display = "none"; // 移除 input.classList.remove("search"); }); </script> </body> </html> 鼠标点击下拉框里面的内容时,上面的搜索框出现鼠标点击的内容
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
解释代码网上书店后台管理系统 目录 ·书籍信息管理
·其他模块管理
·其他模块管理
·其他模块管理
·其他模块管理 <form action="" method="post" name="form1" target="_blank" id="form1" > 基本信息 书号: <label for="number"></label> <input name="number" type="text" size="25" maxlength="30" /> 书名: <label for="name"></label> <input name="name" type="text" size="25" maxlength="30" /> 作者: <label for="author"></label> <input name="name" type="text" size="25" maxlength="30" /> 出版社: <select name="PressName">
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)