将单词添加到从选择中选择的文本区域

Question

我有一个选择和一个按钮。

<select name="cars" id="cars">

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="mercedes">Mercedes</option>

  <option value="audi">Audi</option>

</select>

<button>Add Selected To Textarea</button>

<textarea rows="5" readonly></textarea>

基本上每次我选择一个选项并单击按钮时，我都需要将所选内容添加到新行中的文本区域

我怎样才能做到这一点？

Answer 1

function addToTextarea() {&nbsp; var currentText = $('#textarea').text();&nbsp; if(currentText.trim().length == 0) $('#textarea').text($('#cars').val());&nbsp; else $('#textarea').text(currentText + '\n' + $('#cars').val());}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="cars" id="cars">&nbsp; <option value="volvo">Volvo</option>&nbsp; <option value="saab">Saab</option>&nbsp; <option value="mercedes">Mercedes</option>&nbsp; <option value="audi">Audi</option></select><button onclick="addToTextarea();">Add Selected To Textarea</button><textarea id="textarea" rows="5" readonly></textarea>因此，您首先需要向调用 javascript 函数的按钮添加点击监听器。在此函数中，您可以使用 jquery 从 select 元素中获取当前选定的值，并将该值添加到文本区域的当前文本中。

Answer 2

作为纯 jQuery（即，不混合 jQuery 和 vanilla javascript）：$('button').on('click',() => {&nbsp; &nbsp; $('textarea').val(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; (index,value) => value + $('#cars :selected').text() + "\r\n"&nbsp; &nbsp; );});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="cars" id="cars">&nbsp; <option value="volvo">Volvo</option>&nbsp; <option value="saab">Saab</option>&nbsp; <option value="mercedes">Mercedes</option>&nbsp; <option value="audi">Audi</option></select><button>Add Selected To Textarea</button><textarea rows="5" readonly></textarea>

Answer 3

const textarea = document.getElementById("text-area-id");function updateTextArea() {&nbsp; const cars = document.getElementById("cars");&nbsp; textarea.value += cars.value + "\n"}<select name="cars" id="cars">&nbsp; <option value="volvo">Volvo</option>&nbsp; <option value="saab">Saab</option>&nbsp; <option value="mercedes">Mercedes</option>&nbsp; <option value="audi">Audi</option></select><button onclick="updateTextArea()">Add Selected To Textarea</button><textarea id="text-area-id" rows="5" readonly></textarea>

Answer 4

function addWord(){&nbsp; const sWord = document.getElementById("cars").value;&nbsp; const oTextarea = document.getElementById("output");&nbsp; let sTextareaValue = oTextarea.value;&nbsp; if(sTextareaValue.length > 0){&nbsp; &nbsp; sTextareaValue = sTextareaValue + "\n";&nbsp; }&nbsp;&nbsp;&nbsp; oTextarea.value = sTextareaValue + sWord;}<select name="cars" id="cars">&nbsp; <option value="volvo">Volvo</option>&nbsp; <option value="saab">Saab</option>&nbsp; <option value="mercedes">Mercedes</option>&nbsp; <option value="audi">Audi</option></select><button onclick="addWord()">Add Selected To Textarea</button><textarea rows="5" id="output" readonly></textarea>

Answer 5

<button id="btn" onclick="var e = document.getElementById('cars');&nbsp; &nbsp; &nbsp; &nbsp; var car = e.options[e.selectedIndex].value;&nbsp; &nbsp; document.getElementById('txtResult').innerText += car + '\n';">Add Selected To Textarea</button><textarea id="txtResult" rows="5" readonly></textarea>