<!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>
时间: 2023-06-13 22:06:40 浏览: 174
这是一个HTML文件,其中包含一个下拉框三级联动菜单和一个提交按钮。在这个HTML文件中,使用了LayUI框架来美化页面,并且引入了两个JavaScript文件:data.js和myjs.js。其中,data.js包含了省份、城市和地区的数据,myjs.js包含了JavaScript代码来实现下拉框三级联动菜单和提交按钮的功能。
相关问题
2.在下面的代码中,当第一个下拉框中的值发生变化时,第二个下拉框中的内容随之变化如省市的两级下拉框,当选择第一个下拉框是河北时,第二个下拉框是河北下面的市区(如张家口市、保定市、石家庄市),当改变第一个下拉框选择山东时,第二个下拉框就会变成山东下面的市区(如烟台市、济南市、青岛市)。请根据上下文补全空白处的代码。 <!DOCTYPEhtml> <html> <head> <meta charset="UTF-8"> <title>两级联动</title> </head> <body> <select name="province"> <option value="1">河北</option> <option value="2">山东</option> </select> <select name="city"> </select> <script src="js/jquery-3.6.3,js"> </script> <script> 请输入function 0 C 请输入var provinceValue = 请输入var citySelect = if (provinceValue =="1")[ citySelect.请输入 citySelect.append("<option value='11'>石家庄市</option>")citySelect.append("<option value='12>保定市</option>");citySelect.append("<option value='13'>张家门市</option>"); 8if (provinceValue =="2")( citySelect.empty0; citySelect.append("<option value='14>烟台市</option>"):citySelect.append("<option value='15>济南市</option>")citySelect.append("<option value='16>青岛市</option>"); $(function 0 { showCity0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两级联动</title>
</head>
<body>
<select name="province">
<option value="1">河北</option>
<option value="2">山东</option>
</select>
<select name="city"> </select>
<script src="js/jquery-3.6.3.js"></script>
<script>
$(function(){
function showCity(){
var provinceValue = $("select[name='province']").val();
var citySelect = $("select[name='city']");
if (provinceValue == "1"){
citySelect.empty();
citySelect.append("<option value='11'>石家庄市</option>");
citySelect.append("<option value='12'>保定市</option>");
citySelect.append("<option value='13'>张家口市</option>");
} else if (provinceValue == "2"){
citySelect.empty();
citySelect.append("<option value='14'>烟台市</option>");
citySelect.append("<option value='15'>济南市</option>");
citySelect.append("<option value='16'>青岛市</option>");
}
}
$("select[name='province']").change(function(){
showCity();
});
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div id="menu"> <ul> <li><a href="/">首页</a></li> <li><a href="/index2">登记数据</a></li> <li><a href="/history">查询数据</a></li> <li><a href="/chart">查询数据</a></li> </ul> </div> <div id="main"> <h1>异常记录登记</h1> <form method="post" action="/submit"> <div class="form-row"> <label for="line">确认线别:</label> <input name="line" class="layui-input" placeholder="请选择线别" /> </div> <div class="form-row"> <label for="date">确认日期:</label> <input type="date" name="date" id="date" /> </div> <div class="form-row"> <label for="model">异常机种:</label> <input type="text" name="model" id="model" placeholder="请输入机种"/> </div> <div class="form-row"> <label for="prod_line">异常现象:</label> <input type="text" name="prod_line" id="prod_line" placeholder="请输入现象"> </div> <div class="form-row"> <label for="prod_date">生产日期:</label> <input type="date" name="prod_date" id="prod_date"> </div> <div class="form-row"> <label for="shift">生产班别:</label> <select name="shift" id="shift"> <option value="白班">白班</option> <option value="夜班">夜班</option> </select> </div> <div class="form-row"> <label for="prod_line_2">生产线别:</label> <input type="text" name="prod_line_2" id="prod_line_2"> </div> <div class="form-row"> <label for="responsible">责任人:</label> <input type="text" name="responsible" id="responsible" placeholder="请输入责任人"> </div> <div class="form-row"> <button type="submit">提交</button> </div> </form> </div> </div> </body> </html>
这是一个异常记录登记的 HTML 页面的代码,其中包含一个菜单栏和一个表单。菜单栏包含4个链接,分别是首页、登记数据、查询数据和查询图表。表单包含多个输入框和下拉框,用于用户输入异常记录相关的信息,包括线别、日期、机种、异常现象、生产日期、生产班别、生产线别和责任人。最后还有一个提交按钮,用户填写完表单后可以点击提交按钮将信息提交到服务器。
阅读全文