javascript - jQuery .change() does not work on the HTML text editor

Question

<select id="test">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>

<script>
$('#test').change(function(){
    $('#taskMessage').val($('#taskMessage').val()+" "+$('#test option:selected').text());
});
</script>


**<textarea class="summernote" id="taskMessage" name="taskMessage" data-plugin-summernote data-plugin-options='{ "height": 200, "codemirror": { "theme": "ambiance" } }'><?php echo htmlspecialchars($taskMessage); ?></textarea>**

What is the method to add the selected:option to the id:taskMessage . if simple textarea is added with the following code it works fine <textarea id="taskMessage"></textarea> but with the HTML editor it does not add the selected:option to the HTML text editor.

question from:https://stackoverflow.com/questions/65868212/jquery-change-does-not-work-on-the-html-text-editor

Answer 1

You're getting the value and it's work fine. check it here:

<select id="test">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>
<textarea class="summernote" id="taskMessage" name="taskMessage" data-plugin-summernote data-plugin-options='{ "height": 200, "codemirror": { "theme": "ambiance" } }'>hi I'm the textarea</textarea>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#test').change(function(){
    const selectValue = $('#test option:selected').text();
    const textValue = $('#taskMessage').val();
    console.log(textValue);
    $('#taskMessage').val(textValue+" "+ selectValue);
});
</script>