Javascript 如何防止jquery中的appendTo方法

我在html代码中面临一个问题，请在下面的代码中查看：

HTML：

<div class="agent_select_wrap">
    <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
        <option value="Select Category" selected="selected">Select Agent Name</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
    </select>
</div>
<div class="agent_select_wrap02">
    <div class="my_textarea"></div>
    <button>Send</button>
</div>

JS

.agent_select_wrap {  width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 {  width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block;   height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button {  display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}

$(document).on('change', 'select[name=menu-114]', function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

$(document).on('change', 'select[name=menu-114]', function () {
    $("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
    $("#my_textarea").html("<p>Please enter your message here..!</p>")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

$（文档）。在（'change'，'select[name=menu-114]'上，函数（）{
$（“您好先生”）.appendTo（“.my_textarea”）
$（“请在此处输入您的消息。！
”。附加到（“.my_textarea”）
$（函数（）{
$（'select'）。更改（函数（）{
$that=$（this）；
$（'textarea'）.val（函数（）{
返回$（this.prop（'defaultValue'）+''+$that.val（）；
});
});
});
});

这是我的工作示例

---

您的问题可能是您没有删除刚刚创建的

textarea

。尝试在

元素中创建它，然后在创建新元素之前删除此元素

$('#temp').remove();

var container = $('<div id="temp">');
$("<textarea> Hello Mr. </textarea>").appendTo(container);
$("<p>Please enter your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

$（'#temp'）。删除（）；
变量容器=$（''）；
$（“您好先生”）。附件（集装箱）；
$（“请在此处输入您的消息。！
”）。附录（容器）；
容器。附加到（“.my_textarea”）；

您只需要更改javascript代码中的一行代码

$（“.my_textarea”）.html（“您好，先生，请在此处输入您的消息。
”；

使用上述代码而不是您的

$（“你好先生”）.appendTo（“.my_textarea”）
$（“请在此处输入您的消息。！
”。附加到（“.my_textarea”）

我相信您想要的是只创建一次

textarea

，并让内联处理程序处理进一步的更改，因此实现它的更好方法是

var onMenuSelected = function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            console.log('Select');
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });

    // Just unbind self
    $(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);

var onMenuSelected=函数（）{
$（“您好先生”）.appendTo（“.my_textarea”）
$（“请在此处输入您的消息。！
”。附加到（“.my_textarea”）
$（函数（）{
$（'select'）。更改（函数（）{
$that=$（this）；
console.log（'Select'）；
$（'textarea'）.val（函数（）{
返回$（this.prop（'defaultValue'）+''+$that.val（）；
});
});
});
//放开自己
$（document）.off（'change'，'select[name=menu-114]'，onMenuSelected）；
}
$（文档）。在（'change'，'select[name=menu-114]'，onMenuSelected）上；

通过定义函数，您可以直接删除

$（文档）。在

上，无需删除其他可能存在的处理程序。而

select

事件将只注册一次

---

在这里。

在这里，使用以下代码：

HTML

<div class="agent_select_wrap">
                     <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
                        <option value="Select Category" selected="selected">Select Agent Name</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                     </select>                    
                </div>




                <div class="agent_select_wrap02">

                    <div id="my_textarea0">

                    </div>
                    <textarea id="my_textarea">

                    </textarea>
                    <button>Send</button>
                </div>

选择代理名称
abc先生
abc先生
abc先生
发送

JS

.agent_select_wrap {  width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 {  width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block;   height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button {  display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}

$(document).on('change', 'select[name=menu-114]', function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

$(document).on('change', 'select[name=menu-114]', function () {
    $("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
    $("#my_textarea").html("<p>Please enter your message here..!</p>")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

$（文档）。在（'change'，'select[name=menu-114]'上，函数（）{
$（“#我的文本区域0”）.html（“你好，先生”）
$（“#我的文本区域”）.html（请在此处输入您的消息。
”）
$（函数（）{
$（'select'）。更改（函数（）{
$that=$（this）；
$（'textarea'）.val（函数（）{
返回$（this.prop（'defaultValue'）+''+$that.val（）；
});
});
});
});

请提问我的问题是当用户选择任何选项时，我希望选项值打印在文本区域，第二个问题是当我选择每次只添加一次文本区域而不是新文本区域时。如果您想在选中的文本区域中添加名称，请尝试此$（“.my_textarea”）.html（“Hello”+$（“.wpcf7选择选项：选定”）.text（）+“请在此处输入您的消息。！

”）；是的，兄弟，我检查了这个，但是它在文本区域添加了所有字符串你好选择城市选择州选择国家先生，亲爱的，它只是在文本区域添加了选中的选项你的代码也接近我的问题，但是文本区域添加了一些不需要的信息现在检查一下。转到小提琴链接..我已经删除了正在从下拉列表中选择ch