Question

I am facing one issue in my html code please check that out below in code:

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>

CSS

.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;}

JS

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

here is my working example https://jsfiddle.net/7j623eho/

Answer 1

Probably your problem is that you don't remove just created textarea. Try to create it in <div id='temp'> element and then remove this element just before you create new one.

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

Answer 2

你只需要在javascript代码中更改一行代码。

$(".my_textarea").html("<textarea> Hello Mr.</textarea><p>Please enter your message here..!</p>");

使用上面的代码而不是你的..

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

Answer 3

我相信你想要的只是创建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);

通过定义函数，您可以直接删除$(document).on，而无需删除其他可能存在的处理程序。 select事件只会注册一次。

jsFiddle此处。

Answer 4

我们转到这里，使用以下代码，

<强> 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>

<强> JS

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

我希望这会对你有所帮助

how to prevent appendTo method in jquery

4 个答案: