Javascript 如何制作所需的下拉式问题
我做了一个简短的调查，有10个问题。在用户单击提交之前，我想将所有10个问题作为一项要求。这些问题以下拉格式列在页面的左侧。我该怎么做呢？我在下面列出了一个代码笔。如果您能帮助解决这个问题，我们将不胜感激Javascript 如何制作所需的下拉式问题,javascript,jquery,html,css,survey,Javascript,Jquery,Html,Css,Survey,我做了一个简短的调查，有10个问题。在用户单击提交之前，我想将所有10个问题作为一项要求。这些问题以下拉格式列在页面的左侧。我该怎么做呢？我在下面列出了一个代码笔。如果您能帮助解决这个问题，我们将不胜感激 调查 1.混音带上有只鸟吗？ 选择一个 言语交际 非言语交际 书面通信 2.威廉斯堡独角兽图默里？ 选择一个 言语交际 非言语交际 书面通信 3.Keytar raclette绿色果汁？ 选择一个 言语交际 非言语交际 书面通信 4.爱迪生·巴格？ 选择一个 言语交际 非言语交
调查
1.混音带上有只鸟吗？
选择一个
言语交际
非言语交际
书面通信
2.威廉斯堡独角兽图默里？
选择一个
言语交际
非言语交际
书面通信
3.Keytar raclette绿色果汁？
选择一个
言语交际
非言语交际
书面通信
4.爱迪生·巴格？
选择一个
言语交际
非言语交际
书面通信
5.Sriracha mumblecore打字机？
选择一个
言语交际
非言语交际
书面通信
6.手提包破旧别致？
选择一个
言语交际
非言语交际
书面通信
7.雷猫有机布什维克格子呢？
选择一个
言语交际
非言语交际
书面通信
8.汽车专家喝醋食品车？
选择一个
言语交际
非言语交际
书面通信
9酒厂tbh美食酒吧DIY奥斯汀？
选择一个
言语交际
非言语交际
书面通信
10Godard thundercats粗牛仔布四美元？
选择一个
言语交际
非言语交际
书面通信
提交调查
&抄袭；2017年关键路径调查
.包含{
边框：2个实心#ccc；
左边距：-20px；
右边距：150px；
背景色：#B3；
}
标签{
背景色：；
}
.图表{
右边距：75px；
边缘顶部：30px；
}
.内容{
显示器：flex；
弯曲方向：立柱；
}
.grid-100，.graph{
弹性：100；
左边距：20px；
}
.grid-75{
填充顶部：15px；
垫底：15px；
}
.按钮{
背景色：#692f23；
边框：实心2px#f2ce0f；
字体大小：14px；
高度：40px；
线高：36px；
填充：0 15px；
边缘顶部：20px；
颜色：#f2ce0f；
边界半径：10%；
}
字段集{
边缘底部：20px；
}
.主标题{
显示器：flex；
宽度：100%；
证明内容：之间的空间；
}
.主导航{
显示器：flex；
}
.调查{
显示器：flex；
}
.调查，网格-100{
弹性：2；
}
/* =================================
基本布局样式
==================================== */
/*----导航----*/
.姓名{
字号：1.35em；
保证金：0；
颜色：#f2ce0f；
}
.主导航{
边缘顶部：5px；
}
.说出一个名字，
.主导航a{
文本对齐：居中；
显示：块；
填充：10px 15px；
}
.主导航a{
字体大小：.95em；
颜色：#4d；
文本转换：大写；
}
.主导航a:悬停{
颜色：#093a58；
}
#标题文本{
颜色：#692f23；
}
/*----布局容器--*/
.主标题{
背景色：#f2ce0f；
填料顶部：.5em；
垫底：5em；
边框：4px实心#890d1a；
}
.主页脚{
文本对齐：居中；
}
.主页脚{
背景：#d9e4ea；
填充：2em 0；
边缘顶部：30px；
}
/* =================================
媒体查询
==================================== */
@介质（最小宽度：769px）{
.主标题，
.行{
宽度：100%；
保证金：0自动；
}
}
@介质（最小宽度：1025px）{
.主标题，
.行{
宽度：100%；
/*最大宽度：1150px*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="content" role="main">
<header class="main-header">
<h1 class="name"><a id="header_text" href="#">Keypath Survey</a></h1>
<ul class="main-nav">
<li><a href="#">My Profile</a></li>
<li><a href="#">Scores</a></li>
<li><a href="#">Favorites</a></li>
</ul>
</header>
<!-- /.main-header -->
<div class="survey">
<div class="grid-100">
<form action="">
<div class="contained">
<div class="grid-100">
</br>
<fieldset>
<div>
<label for="">1. Mixtape put a bird on it sartorial?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">2. Williamsburg unicorn tumeric?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">3. Keytar raclette green juice?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">4. Edison bulb iceland af pug?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">5. Sriracha mumblecore typewriter?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">6. Tote bag shabby chic cred?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">7. Thundercats organic bushwick plaid?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">8. Vexillologist drinking vinegar food truck?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">9. Distillery tbh gastropub DIY austin?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">10. Godard thundercats raw denim four dollar?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-footer">
<button class="button primary submit">Submit Survey</button>
</div>
</form>
</div>
<div class="graph">
<canvas id="myChart"></canvas>
</div>
</div>
</main>
<footer class="main-footer">
<span>©2017 Keypath Surveys</span>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<script src="main.js"></script>
</html>
.contained {
border: 2px solid #ccc;
margin-left: -20px;
margin-right: 150px;
background-color: #b3b3b3;
}
label {
background-color:;
}
.graph {
margin-right: 75px;
margin-top: 30px;
}
.content {
display: flex;
flex-direction: column;
}
.grid-100, .graph {
flex: 1 0 0;
margin-left: 20px;
}
.grid-75 {
padding-top: 15px;
padding-bottom: 15px;
}
.button {
background-color: #692f23;
border: solid 2px #f2ce0f;
font-size: 14px;
height: 40px;
line-height: 36px;
padding: 0 15px;
margin-top: 20px;
color: #f2ce0f;
border-radius: 10%;
}
fieldset {
margin-bottom: 20px;
}
.main-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.main-nav {
display: flex;
}
.survey {
display: flex;
}
.survey .grid-100 {
flex: 2;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.35em;
margin: 0;
color: #f2ce0f;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
padding: 10px 15px;
}
.main-nav a {
font-size: .95em;
color: #4d4d4d;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
#header_text {
color: #692f23;
}
/* ---- Layout Containers ---- */
.main-header {
background-color: #f2ce0f ;
padding-top: .5em;
padding-bottom: .5em;
border: 4px solid #890d1a;
}
.main-footer {
text-align: center;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.main-header,
.row {
width: 100%;
margin: 0 auto;
}
}
@media (min-width: 1025px) {
.main-header,
.row {
width: 100%;
/*max-width: 1150px;*/
}
}
/*Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
var $selects = $("select"),
data,
ctx = $("#myChart"),
config = {
selected: 0,
type: "pie",
options: {
responsive: true,
pieceLabel: {
render: function(args) {
var selected = function() {
var out = 0;
for (var i = 0; i < data.length; i++) {
out = out + data[i];
}
return out;
};
var percentage = Math.round(args.value / selected() * 100) + "%";
$('#'+args.label).text(percentage);
return percentage;
},
fontSize: 14,
fontStyle: "bold",
fontColor: "#fff",
fontFamily: '"Lucida Console", Monaco, monospace'
}
},
data: {
labels: ["Verbal", "Non-verbal", "Written"],
datasets: [
{
data: [0, 0, 0],
backgroundColor: ["#a03021", "#f2ce0f", "#4d4d4d"]
}
]
}
};
myChart = new Chart(ctx, config);
$(".submit").on("click", function(e) {
var results = { v: 0, n: 0, w: 0 },
hasSelected = 0;
e.preventDefault();
$selects.each(function() {
var val = $(this).val();
if (val) {
results[val]++;
hasSelected = 1;
}
});
if (hasSelected) {
data = [];
$.each(results, function(k, v) {
data.push(v);
});
} else {
data = JSON.parse(localStorage.getItem("data"));
}
config.data.datasets[0].data = data;
myChart.update();
localStorage.data = JSON.stringify(data);
});
<select required name="" id="">
<option value="" >Select One</option>
... other options
</select>
...
<form id="myForm" action="">
...
$("#myForm").on("submit", function(e) {
// do your stuff here
...
}