将数据输入和下拉选择组合到js中

Combination of data entry and drop down selections into a js

本文关键字：组合 js 选择 数据 输入      更新时间：2023-09-26

我的页面中有一个数据输入部分，用户必须将他/她的名字放在空白处，然后在是/否下拉选项之间进行选择。填写完毕后，用户单击"生成"，所有信息、问题和答案都会显示在下面。我如何管理js将开放式和下拉式问题/答案都考虑到结果中？以及我如何调整结果的字体大小？这就是我目前所拥有的。

<form name="myForm">
Name: <input type="text" name="firstname">
    <font size="3">
        <label for="q7">- Done it?</label>
    </font>
    <select id="q7">
        <option>Yes</option>
        <option>No</option>
    </select>
    <input type="button" onclick="populateResults()" value="Generate">
        <div id="result"></div>
    </form>
    <script>
function populateResults() {
  var selects = document.forms.myForm.querySelectorAll('select'),
      result = document.getElementById("result");
  Array.from(selects).forEach(function(a, i) {
      var answer = a.options[a.selectedIndex].text,
          question = selects[i].labels[0].textContent;
      result.innerHTML += question + ' ' + answer + '
            <br>';
  })
}
        </script>
    </body>
</html>

首先，对于select中的option，它应该具有value属性。

你把代码搞得太复杂了。

你可以这样做：

<form name="myForm">
Name: <input type="text" name="firstname" id="firstname">
<font size="3">
    <label for="q7">- Done it?</label>
</font>
<select id="q7">
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>
<input type="button" onclick="populateResults()" value="Generate">
    <div id="result"></div>
</form>
<script src="jquery.js"></script>
<script>
function populateResults() {
    var select = $('#q7').val();
    var name = $('#firstname').val();
    var result = name + ' - Done it? ' + select;
    $('#result').text(result);
}
    </script>

这很冗长，但在这里我添加了一些id，从标记中删除了代码，在标签中添加了一个类，这样我就可以找到一个样式：

修订后的标记：

<form id="myform" name="myForm">Name:
    <input type="text" name="firstname" id="firstname" />
    <label for="q7" class="mylabel">- Done it?</label>
    <select id="q7">
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
    <input type="button" value="Generate" id="generate" />
    <div id="result"></div>
</form>

添加此CSS（删除了过时的字体标签）

.mylabel {
    font-size:1.5em;
}

VERBOSE代码（清理它，详细说明意图）

function populateResults() {
    var myselect = $('#q7');
    var selectedText = myselect.find('option:selected').text();
    var selectedVal = myselect.val();
    var question = myselect[0].labels[0].textContent;//same thing
    question = myselect.siblings('.mylabel').text();// same thing
    $('#result').append(question + ' :' + selectedText + ":" + selectedVal + '<br />');
}
$('#myform').on('click', '#generate', populateResults);
相关文章：