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

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() {

  var currentText = $('#textarea').text();

  if(currentText.trim().length == 0) $('#textarea').text($('#cars').val());

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

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

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

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

  <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',() => {

    $('textarea').val( 

        (index,value) => value + $('#cars :selected').text() + "\r\n"

    );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

const textarea = document.getElementById("text-area-id");

function updateTextArea() {

  const cars = document.getElementById("cars");

  textarea.value += cars.value + "\n"

}

<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 onclick="updateTextArea()">Add Selected To Textarea</button>

<textarea id="text-area-id" rows="5" readonly></textarea>

Answer 4

function addWord(){

  const sWord = document.getElementById("cars").value;

  const oTextarea = document.getElementById("output");

  let sTextareaValue = oTextarea.value;

  if(sTextareaValue.length > 0){

    sTextareaValue = sTextareaValue + "\n";

  }  

  oTextarea.value = sTextareaValue + sWord;

}

<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 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');

        var car = e.options[e.selectedIndex].value;

    document.getElementById('txtResult').innerText += car + '\n';">Add Selected To Textarea</button>

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