jquery将textarea转换为下拉列表

Question

我有以下 html 代码：

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

我想转换成一个选择下拉菜单，具有以下值：

For pick-up
For scanning
For courier

我正在研究这个jquery: convert textarea (separated by new lines) to select option menu，但似乎无法让它适用于我的用例。

我正在尝试的代码如下：

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

问题是文本只是放在文本区域内吗？如何使用 jquery 将我的文本区域转换为下拉选择列表？

Answer 1

.append() 方法将指定的内容作为 jQuery 集合中每个元素的最后一个子元素插入。

.val()可以获取匹配元素集合中第一个元素的当前值，或者设置每个匹配元素的值。

$('[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($('#holdnotes_8').val());

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