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

所以我有一个选择下拉列表，它创建了两个新的输入字段

我的JSFIDLE:

我遇到的问题是，在创建一个新的输入字段之后，可以一次又一次地创建相同的输入字段。只需在中反复选择每个选项即可

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

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

然而，您知道一种更简单或更直接的方法来实现这一点吗

jQuery：

$（文档）.ready（函数（）{
var mobile=“手机：”；
var workphone=“工作电话：”；
$（'#id_contact_info'）。更改（函数（）{
if（$（this）.val（）==2）{
console.log（“手机”）；
$（'.choice\u cell\u phone'）。附加（手机）；
}else if（$（this）.val（）==3）{
console.log（“工作电话”）；
$（'.choice_work_phone'）。追加（workphone）；
}
});
});

HTML

添加更多联系信息：
选择联系人类型
手机
工作电话

---

这很有效。我创建了一个新变量来检查是否部署了新输入

$(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;

        }

    });

});

$（文档）.ready（函数（）{
var cellextra=0；
var-workextra=0；
var mobile=“手机：”；
var workphone=“工作电话：”；
$（'#id#u contact_info'）。更改（函数（）{
if（$（this）.val（）==2&&cellextra==0）{
console.log（“手机”）；
$（'.choice\u cell\u phone'）。附加（手机）；
cellextra=1；
}else if（$（this）.val（）==3&&workextra==0）{
console.log（“工作电话”）；
$（'.choice_work_phone'）。追加（workphone）；
额外工作=1；
}
});
});

只需将工作/手机更改为jQuery对象：

var mobile=$（“手机：”）；
var workphone=$（“工作电话：”）；

你一直把手机和工作选择附加到

tr

上。您需要为正在创建的每个选项创建一个新的

tr

。

只需添加一个额外的条件

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

if（$（'input[type=tel]'）。长度<2）{

这将检查输入的长度，只有当输入的长度小于2时才通过

---

您可以检查您的

是否已经有孩子，将您的条件更改为：

$(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;

        }

    });

});

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

---

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

小提琴：

---

如果我理解正确，您不想将

输入

加倍。为什么不使用

html

而不是

append

？更改

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

到

演示：

注意：如果您需要在意外单击下拉列表之前，将某人键入的数据保留在文本框中，则此操作不会那么有效。最好的方法是

添加特定选项后隐藏该选项

在添加的输入旁边添加删除按钮

如果单击了“删除”，则在下拉列表中显示该选项

---

一旦创建了select，只需在select中禁用该选项！哦，想从select函数中删除吗？我认为一个很好的方法是使用.html（）方法而不是append，因此：$（'.choice_cell_phone'）.html（手机）；和$（'.choice_work_phone'）.html（工作电话）；这样，您就不需要使用额外的变量作为标志来查看它们是否已被添加。在

change

事件中，包括此行：

$（This）.find（“选项：selected”）.prop（“disabled”，true）

。选择此选项后，您不能再选择它，它将被禁用。@Leon--像这样：非常感谢！在项目中使用此选项，如果存在子项，他还需要替换现有子项。我想如果存在子项，他希望替换现有输入。谢谢，这很有效！尽管我认为Neal的答案可能是最正确的basic@Leon、 当然：）这可能就是他有57.2k的原因：）没问题^ ^ ^很乐意帮助@Leon并且假设你想在下拉列表中添加更多选择选项，我会使用switch case语句，而不是“if else if”。分叉演示：哦，是的，defs！这是我一开始应该做的，谢谢你，那时我没有手机和工作电话，他们会同意的不要再互相写了。@tymeJV怎么会这样呢？两个都有不同的

tr

s设置-

choice\u-work\u-phone

和

choice\u-cell\u-phone

这同样有效，谢谢！超级干净：）尽管我认为Neal的更小

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

$('#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);
        }

    });

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

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