3

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

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

在此处输入图像描述

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

在此处输入图像描述

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

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

4

7 回答 7

2

只需将工作/手机更改为 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>");
于 2013-07-29T17:40:41.193 回答
2

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

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

至

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

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

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

  1. 添加后隐藏特定选项
  2. 在添加的输入旁边添加一个删除按钮
  3. 如果单击删除，则在下拉列表中显示选项。
于 2013-07-29T17:45:45.667 回答
1

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

演示在这里

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

        }

    });

});
于 2013-07-29T17:39:57.097 回答
1

只需添加一个额外的条件

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

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

检查小提琴

于 2013-07-29T17:41:06.010 回答
1

您可以检查您<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

于 2013-07-29T17:43:04.300 回答
1

基本上，您需要做的就是在检查 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);
        }

    });
于 2013-07-29T17:43:43.570 回答
0

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

于 2013-07-29T17:40:55.143 回答