通过下拉菜单创建新的输入字段，如何将新输入限制为每个只有 1 个？

Question

所以我有一个选择下拉菜单，它创建了 2 个新的输入字段。

我的 jsFiddle： http://jsfiddle.net/leongaban/CbcmS/

我遇到的问题是，在您创建一个新的输入字段后，您可以一遍又一遍地创建相同的输入字段。只需在the dropdown 中一遍又一遍地选择每个选项。

这不是故意的，我希望发生的情况是，一旦创建了输入，就不能再创建了。

我目前唯一的想法是创建另一个变量，它将手机或工作电话存储到一个数组中，或者只是一个真假布尔值，并在 if else 语句中检查它。

但是，您是否知道一种更简单或更直接的方法来完成此操作？

jQuery:

$(document).ready(function() {

var cellphone = "<th><label>Cell Phone:</label></th><td><input type='tel' name='cp' value=' ' maxlength='11' /></td>";
var workphone = "<th><label>Work Phone:</label></th><td><input type='tel' name='wp' value=' ' maxlength='11' /></td>";

$('#id_contact_info').change(function(){

        if ($(this).val() == 2) {
            console.log('cell phone');
            $('.choice_cell_phone').append(cellphone);

        } else if ($(this).val() == 3) {
           console.log('work phone');
           $('.choice_work_phone').append(workphone);
        }

    });

});

HTML

<div class="form-fields">
<table>
    <tr>
        <th><label for="id_contact_info">Add More Contact Info: </label></th>
        <td>
            <select name="contact_info" id="id_contact_info">
                <option value="1">select contact type</option>
                <option value="2">Cell Phone</option>
                <option value="3">Work Phone</option>
            </select>
        </td>
    </tr>

    <tr class="choice_cell_phone">

    </tr>

    <tr class="choice_work_phone">

    </tr>

</table>

Answer 1

只需将工作/手机更改为 jQuery 对象：http://jsfiddle.net/maniator/CbcmS/22/

var cellphone = $("<th><label>Cell Phone:</label></th><td><input type='tel' name='cp' value=' ' maxlength='11' /></td>");
var workphone = $("<th><label>Work Phone:</label></th><td><input type='tel' name='wp' value=' ' maxlength='11' /></td>");

Answer 2

如果我理解正确，您不希望 input 加倍。为什么不使用html 而不是append？改变

$('.choice_cell_phone').append(cellphone);

到

$('.choice_cell_phone').html(cellphone);

演示：http://jsfiddle.net/WHUqH/

注意：如果您需要在不小心单击下拉菜单之前保留某人在文本框中键入的数据，这不会那么有效。最好的办法是

1. 添加后隐藏特定选项
2. 在添加的输入旁边添加一个删除按钮
3. 如果单击删除，则在下拉列表中显示该选项。

Answer 3

这行得通。我创建了一个新变量来检查是否部署了新输入。

Demo here

$(document).ready(function () {
    var cellextra = 0;
    var workextra = 0;

    var cellphone = "<th><label>Cell Phone:</label></th><td><input type='tel' name='cp' value=' ' maxlength='11' /></td>";
    var workphone = "<th><label>Work Phone:</label></th><td><input type='tel' name='wp' value=' ' maxlength='11' /></td>";

    $('#id_contact_info').change(function () {

        if ($(this).val() == 2 && cellextra == 0) {
            console.log('cell phone');
            $('.choice_cell_phone').append(cellphone);
            cellextra = 1;

        } else if ($(this).val() == 3 && workextra == 0) {
            console.log('work phone');
            $('.choice_work_phone').append(workphone);
            workextra = 1;

        }

    });

});

Answer 4

只需添加一个额外的条件

if ($('input[type=tel]').length < 2) { 

这将检查输入的长度，仅在长度小于 2 时通过。

Check Fiddle

Answer 5

您可以检查您的<tr>s 是否已经有孩子，将您的条件更改为：

if ($(this).val() == 2 && $('.choice_cell_phone').children().length == 0) {
    //
} else if ($(this).val() == 3 && $('.choice_work_phone').children().length == 0) {

JSFiddle Demo

Answer 6

基本上，您需要做的就是在检查 select 的 val 时检查页面上是否已经存在输入。我还将您的等价更改为三等号，但这与这里的解决方案无关；由于 JavaScript 评估等价的方式，这只是更好的做法。

小提琴：http://jsfiddle.net/hApx3/

$('#id_contact_info').change(function(){

        if (($(this).val() === '2') && !$('.choice_cell_phone').children().length) {
            console.log('cell phone');
            $('.choice_cell_phone').append(cellphone);

        } else if (($(this).val() === '3') && !$('.choice_work_phone').children().length) {
           console.log('work phone');
           $('.choice_work_phone').append(workphone);
        }

    });

Answer 7

您不断将手机和工作选择附加到tr。为您正在创建的每个选项创建一个新的tr 所需的内容。