jquery convert textarea to dropdown-CodePudding

I have the following html codes:

<div  id="notesrow_8">
<label for="holdnotes_8">Reservation notes:</label>
<textarea id="holdnotes_8" rows="2" cols="30" name="notes_8"></textarea></div>

I want to convert into a select dropdown, with the following values:

For pick-up
For scanning
For courier

I am looking into this jquery: convert textarea (separated by new lines) to select option menu but can't seem to make it work for my use case.

The code I am trying is below:

$('[id^=holdnotes_]').html('<select name="resnote" id="resnote" form="resnoteform"><option value="For Scanning">For Scanning</option> <option value="For Pick-up">For Pick-up</option>   <option value="For courier">For Courier</option></select>');

Problem is that the text is just being put inside the textarea? How do I convert my text area into a dropdown select list using jquery?

CodePudding user response：

why do you need to covert the textarea into dropdown?

CodePudding user response：

You need .append()

$('[id^=holdnotes_]').html('<select name="resnote" id="resnote" form="resnoteform"><option value="For Scanning">For Scanning</option> <option value="For Pick-up">For Pick-up</option>   <option value="For courier">For Courier</option></select>');

$('#notesrow_8').append('<select name="resnote" id="resnote" form="resnoteform"><option value="For Scanning">For Scanning</option> <option value="For Pick-up">For Pick-up</option>   <option value="For courier">For Courier</option></select>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="notesrow_8">
  <label for="holdnotes_8">Reservation notes:</label>
  <textarea id="holdnotes_8" rows="2" cols="30" name="notes_8"></textarea>
</div>