尝试创建基于数字的表单字段下拉列表答案

【问题标题】：Trying to create a drop-down of form fields, that is based on a number尝试创建基于数字的表单字段下拉列表
【发布时间】：2015-07-02 22:17:53
【问题描述】：

下午好！我正在 Wordpress 的联系表 7 中构建联系表。我需要一个功能，其中一个表单字段是数字选择器（例如，1-10），我需要选择要计算的数字并下拉要输入的字段数。

我会尽力解释。因此，如果有人输入 4...我需要四个输入字段的下拉列表。

我已经为这个功能寻找了一些 jquery 脚本，但我基本上处于死胡同。如果有人有任何建议，我将不胜感激！

【问题讨论】：

标签： javascript jquery contact-form-7 input-field

【解决方案1】：

这是一个使用 jQuery 的选项 (jsFiddle)

HTML

Number of inputs:
<select class="numInputs" onChange="buildInputs(this);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div class="inputs"></div>

Javascript (jQuery)

$(document).ready(function () {
    // set onchange event for the select box.
    $('.numInputs').change(function () {
        // clear any inputs added to the div.
        $('.inputs').empty();
        // get number of inputs to add from select box.
        var num = $('.numInputs option:selected').text();
        // build the inputs.
        for (var i = 1; i <= num; i++) {
            $('<input type="text"/><br/>').appendTo('.inputs');
        }
    })
});

【讨论】：

嗨，克里斯，感谢您的反馈。你的解决方案就是我正在寻找的。我插入了你的脚本，但是当你选择一个数字时它仍然不会填充字段。我看到它在 Jsfiddle 中工作。我认为这与联系表 7 中使用的简码有关。有什么建议吗？
@toolbox3 你试过在浏览器中调试这个问题吗？看来您遇到了一个例外：Uncaught ReferenceError: buildInputs is not defined (toolboxwebdesign.com/:318) 在源代码的第 318 行。你在哪里定义了我的示例中的 buildInputs 方法？
哦，我使用了两个标题。好的，现在脚本在中还是什么都没有？我还缺少另一件事吗？
你的结束<script>标签缺少正斜杠/，它应该是</script>。此外，您可能应该在某个时候合并所有 $(document).ready(....); 调用（尽管它没有必要工作）。
我接受了。但是，我尝试了另一个站点，但没有成功。我想知道是否有某种冲突。你能看看我的代码吗？ lawofficeelizabethvhan.com/contact

【解决方案2】：

您将使用 javascript，我为您编写了一个简单的示例。我从来没有使用过wordpress，但这只是它自己的工作，我认为你应该能够把它放进去。

Javascript

<script type="text/javascript">
    function thing(){
        var num = document.getElementById("number").value; //Get the number out of the number field
        document.getElementById("select").innerHTML = ''; //Get rid of the placeholder, or the old ones
        for (var i = 0; i < num; i++){
            var newOpt = document.createElement('option');
            newOpt.innerHTML = i; //It'll just have a dropdown for 0 to the number
            newOpt.value = i;
            document.getElementById("select").appendChild(newOpt);
        }
    }
</script>

HTML

<form>
    Number: <input type="number" name="number" id="number" onblur="thing();">
    <select id="select">
        <option value="no">Enter a number first</option>
    </select>
    <input type="submit" value="Submit">
</form>

此外，您可以使用 onkeyup 或其他东西，而不是使用 onblur。 onblur 用于失去焦点时。

【讨论】：

感谢您的帮助！但是，我正在寻找更多 Chris 放在下面的内容。