Question

我创建了一个包含10个问题的简短调查。在用户点击提交之前，我想将所有10个问题作为要求。问题以页面左侧列出的下拉格式显示。我该怎么做呢？我在下面列出了一个codepen。任何帮助解决这个问题将不胜感激。

<!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>&copy;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);
});

Answer 1

你用钢笔做事的方式有两个问题：

您将其中一个选项设置为“已选中”。您应该将默认的“Select One”作为顶部选项，给它一个值“”并且不给它“选中”属性，这样HTML“required”就可以检测到还没有选择任何内容。
您可以点击按钮进行处理（图形绘制和填充），而不是表单提交。因此，即使未正确提交表单，该过程也会运行。

tldr; 您应该让所有<option>未被选中，并为无效选项提供值“”。

<select required name="" id="">
    <option value="" >Select One</option>
    ... other options
</select>

您应该为表单提供“id”属性：

...
<form id="myForm" action="">
...

只在表单提交处理它：

$("#myForm").on("submit", function(e) {
  // do your stuff here
  ...
}

Codepen

Answer 2

您可以使用

的默认必需属性

<form>
  <p>What is your favorite fruit?</p>
  <p>
    <select name="fruit" required>
      <option value="" disabled selected>Select your option</option>
      <option value="1">Apple</option>
      <option value="2">Orange</option>
    </select>
  </p>
  <p>
    <input type="submit" value="Submit">
  </p>
</form>

如何提出下拉问题

2 个答案: