Question

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

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

enter image description here

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

enter image description here

这不是我想要的，我想要发生的是一旦创建了输入，就不能再创建了。

我目前唯一的想法是创建另一个变量，它将手机或工作电话存储到数组中，或只是一个真假布尔值，并在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/

注意：如果您在意外点击下拉菜单之前需要在文本框中输入某人的数据，这将不会有效。最好的方法是

隐藏添加后的特定选项
在添加的输入
如果单击删除，则在下拉列表中显示该选项。

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>是否已有孩子，将您的条件更改为：

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

基本上，您需要做的是检查选择的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所需的内容。

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

7 个答案: