根据表单输入值更改选择列表答案

【问题标题】：Change select list based off of form input value根据表单输入值更改选择列表
【发布时间】：2014-05-03 16:12:13
【问题描述】：

我正在为我的婚礼创建一个 RSVP 表单。每个邀请都会有一个手写的三位数 ID。 ID 将以该聚会中被邀请的人数开头。示例：ID：302 = (3) 三个人被邀请和 (02) 受邀客人的 ID。

我们希望通过这种方式来限制 RSVPing 的人数超过邀请的人数，同时获得准确的与会者人数。

因此，如果有人在表格中输入他们的 ID，例如 302，就会有一个可供三名或更少的客人使用的选择列表。 514 将有 1 - 5 个可用的选择列表，依此类推。

我如何在 jQuery 或 Ajax 中实现这一点？

【问题讨论】：

ID 被输入到文本字段中，从而改变了选择列表的大小。就这些。我不需要关联数据库或使用 Ajax，我只是想查看选项。
喜欢这个jsfiddle.net/j08691/XmpqN?
这很漂亮。非常感谢。
我发布了我的示例作为答案。
对不起，我不能投票，因为我是新人。但谢谢你的工作。很大的帮助。

标签： javascript jquery ajax

【解决方案1】：

让您开始：

HTML

<form action="" method="post">ID
    <input name="code" type="text" size="3" />
    <button type="button">Proceed</button>
    <label>Guests
        <select name="guests"></select>
    </label>
</form>

jQuery

$('button').click(function () {
    var code = $.trim($('input[name=code]').val());
    var guests = code.substr(0, 1);
    $('select[name=guests]').empty();
    if ($.isNumeric(code)) {
        for (var i = 1; i <= guests; i++) {
            $('select[name=guests]').append('<option>' + i + '</option>');
        }
        $('label').css('display', 'block');
    }
})

jsFiddle example

【讨论】：