HTML代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ttt</title>
<link rel="stylesheet" href="css.css">
<script src="https://www.somode.com/public/js/jquery.min.js"></script>
</head>
<body>
<div class="show-search">
<form action="" method="get">
<div>U盘启动快捷查询：</div>
<select id='ST_1' name="pc_type">
<option>请选择电脑类型</option>
<option value='pid_2'>品牌台式电脑</option>
<option value='pid_3'>组装台式电脑</option>
<option value='pid_1'>品牌笔记本</option>
</select>
<select id='ST_2'>
<option>请选择电脑品牌</option>
<option class='pid_1' value='F9'>惠普笔记本</option>
<option class='pid_1' value='F12'>联想Thinkpad</option>
<option class='pid_1' value='F12'>戴尔笔记本</option>
<option class='pid_1' value='F12'>神舟笔记本</option>
<option class='pid_1' value='F12'>东芝笔记本</option>
<option class='pid_1' value='F12'>三星笔记本</option>
<option class='pid_1' value='F12'>IBM笔记本</option>
<option class='pid_1' value='F12'>富士通笔记本</option>
<option class='pid_1' value='F12'>海尔笔记本</option>
<option class='pid_1' value='F12'>方正笔记本</option>
<option class='pid_1' value='F12'>清华同方笔记本</option>
<option class='pid_1' value='F11'>微星笔记本</option>
<option class='pid_1' value='F9'>明基笔记本</option>
<option class='pid_1' value='F12'>技嘉笔记本</option>
<option class='pid_1' value='ESC'>索尼笔记本</option>
<option class='pid_1' value='长按option'>苹果笔记本</option>
<option class='pid_1' value='F12'>华硕笔记本</option>
<option class='pid_1' value='F12'>宏基笔记本</option>
<option class='pid_1' value='F12'>联想笔记本</option>
<option class='pid_2' value='ESC'>戴尔台式机</option>
<option class='pid_2' value='F12'>神州台式机</option>
<option class='pid_2' value='F8'>华硕台式机</option>
<option class='pid_2' value='F12'>方正台式机</option>
<option class='pid_2' value='F12'>清华同方台式机</option>
<option class='pid_2' value='F12'>海尔台式机</option>
<option class='pid_2' value='F12'>宏基品牌台式</option>
<option class='pid_2' value='F9或F12'>惠普品牌台式</option>
<option class='pid_2' value='F12'>联想品牌台式</option>
<option class='pid_3' value='ESC'>杰微主板</option>
<option class='pid_3' value='F12'>致铭主板</option>
<option class='pid_3' value='ESC'>馨正主板</option>
<option class='pid_3' value='F9'>冠铭主板</option>
<option class='pid_3' value='ESC或F11'>七彩虹主板</option>
<option class='pid_3' value='F11'>华擎主板</option>
<option class='pid_3' value='ESC'>斯巴达卡主板</option>
<option class='pid_3' value='F11'>昂达主板</option>
<option class='pid_3' value='ESC'>双敏主板</option>
<option class='pid_3' value='F10'>翔升主板</option>
<option class='pid_3' value='ESC或F11'>精英主板</option>
<option class='pid_3' value='ESC或F12'>富士康主板</option>
<option class='pid_3' value='F11或F12'>顶星主板</option>
<option class='pid_3' value='ESC'>铭瑄主板</option>
<option class='pid_3' value='F8'>盈通主板</option>
<option class='pid_3' value='ESC'>捷波主板</option>
<option class='pid_3' value='ESC或F12'>梅捷主板</option>
<option class='pid_3' value='F9'>映泰主板</option>
<option class='pid_3' value='F12'>微星主板</option>
<option class='pid_3' value='F12'>技嘉主板</option>
<option class='pid_3' value='F8'>华硕主板</option>
</select>
<span>温馨提示：</span><em id="idTipstxt">请选择左边电脑类型和品牌查看U盘启动快捷</em>
</form>
<script>
$('#ST_1').change(function () {
$('#ST_2 option:not(:first)').hide();
var PID = $('#ST_1 option:selected').val();
if (PID) {
$("#ST_2 option:first").attr("selected", true);
$('#idTipstxt').html(' 请在左侧选择电脑类型和品牌查看 ');
$('.' + PID).show();
}
}).trigger('change');
$('#ST_2').change(function () {
var txt = $('#ST_2 option:selected').val();
if (txt) {
var code = "";
$('#idTipstxt').html('一键u盘启动快捷键：<b style="color:#1A8EFF;">' + txt + '</b>' + code);
} else {
$('#idTipstxt').html('');
}
});
</script>
</div>
</body>
</html>
CSS部分：
.show-search {
width: 1200px;
margin: 10px auto;
background: #FFF;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 3px 5px #eee;
position: relative;
z-index: 200;
}
.show-search form {
width: 90%;
height: 60px;
margin: 0 auto;
position: relative;
text-align: center;
line-height: 60px;
}
.show-search form div {
display: inline-block;
font-size: 24px;
float: left;
}
.show-search form select {
font-size: 18px;
margin-left: 15px;
width: 225px;
height: 44px;
color: #999999;
border-radius: 3px;
float: left;
margin-top: 9px;
}
.show-search form span, .show-search form em {
font-size: 16px;
float: left;
}
.show-search form span {
margin-left: 27px;
float: left;
}
.show-search form em {
color: #1A9BFA;
width: 250px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: right;
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论