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

所以我有一个select下拉列表，它创建了两个新的输入字段。
我的jsfiddle:http://jsfiddle.net/leongaban/CbcmS/
我遇到的问题是，在创建一个新的输入字段之后，可以不断地重复创建同一个输入字段。只需在the dropdown中反复选择每个选项。
这不是有意的，我希望一旦输入被创建，就不能再创建了。
我目前唯一的想法是创建另一个变量，将手机或工作电话存储到一个数组中，或者只创建一个真假布尔值，并在if-else语句中进行检查。
然而，你知道一个更容易或更直接的方法来实现这一点吗？
查询：

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

最佳答案

只需将工作/手机更改为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>");

关于jquery - 通过下拉列表创建新的输入字段，如何将新输入限制为每个只有1个？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17930541/