如何使用下拉选项在文本字段中填充和添加文本

Question

我不是编码器，我在这里找到了这段代码

http://jsfiddle.net/kjy112/kchRh/

<textarea id="mytext"></textarea>

<select id="dropdown">
    <option value="">None</option>
    <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
    <option value="text4">text4</option>
</select>

var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function(){
     mytextbox.value = mytextbox.value  + this.value;
}

我想修改它，以便我有多个下拉列表，每个下拉列表都在同一个字段中添加他的文本。

实际上，我必须为用户轻松创建一个紧凑的代码，以便用户使用下拉列表选择一些短语，代码将填充文本字段。

如果我可以更精确，请告诉我。 如上所述，我不是编码器，所以如果你能写下使用的代码，我会非常高兴。

谢谢！

Answer 1

这是一个js bin，其中列出了多个下拉列表'onchange事件： https ： //jsfiddle.net/kchRh/944/

您希望提供下拉类名称，然后遍历每个下拉列表以设置其侦听器。

HTML：

<textarea id="mytext"></textarea>

<select class="dropdown">
    <option value="">None</option>
    <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
    <option value="text4">text4</option>
</select>

<select class="dropdown">
    <option value="">2None</option>
    <option value="2text1">2text1</option>
    <option value="2text2">2text2</option>
    <option value="2text3">2text3</option>
    <option value="2text4">2text4</option>
</select>

JS：

var mytextbox = document.getElementById('mytext');
var mydropdowns = document.getElementsByClassName('dropdown');

for(i=0;i<mydropdowns.length;i++) {
    mydropdowns[i].onchange = function(){
         mytextbox.value = mytextbox.value  + this.value;
    }
}

Answer 2

我建议采用以下方法：

// create a reusable function:
function updateTextArea() {
  // get all the elements with the class 'dropdown':
  var selectElems = document.querySelectorAll('.dropdown'),
      // get the <textarea> element, using its id: 
      textArea = document.getElementById('mytext'),
      // using Array.prototype.filter on the array-like
      // NodeList, using Function.prototype.call, in
      // order to iterate over the found '.dropdown'
      // elements to form an array of only those elements
      // with a non-zero-length value:
      values = Array.prototype.filter.call(selectElems, function(el) {
      if (el.value.trim().length) {
        return el.value;
      }
    // iterating over the filter-created array, to form a map of
    // the selected values of the elements:
    }).map(function(el) {
      return el.value;
    // joining those arrays together, with Array.prototype.join,
    // to form a comma-separated string of values, and appending
    // a period:
    }).join(', ') + '.';

  // setting the value of the <textarea> to:
  // - an empty string (if the values variable is
  // just the appended-period), or to the value of
  // the values variable:
  textArea.value = values === '.' ? '' : values;
}

// as above, retrieving the '.dropdown' elements:
var selects = document.querySelectorAll('.dropdown');

// iterating over the '.dropdown' elements, using
// Array.prototype.forEach:
Array.prototype.forEach.call(selects, function(el, index, arr) {
  // within the anonymous function of Array.prototype.foreach:
  // the first argument (here: 'el') is the current array-element,
  // second argument (here: 'index') is the index of the current
  // array-element within the array over which we're iterating,
  // third argument (here: 'arr') is the array over which we're
  // iterating.

  // binding updateTextArea as the change event-handler for
  // each of the array-elements over which we iterate:
  el.addEventListener('change', updateTextArea);
});

 function updateTextArea() { var selectElems = document.querySelectorAll('.dropdown'), textArea = document.getElementById('mytext'), values = Array.prototype.filter.call(selectElems, function(el) { if (el.value.trim().length) { return el.value; } }).map(function(el) { return el.value; }).join(', ') + '.'; textArea.value = values === '.' ? '' : values; } var selects = document.querySelectorAll('.dropdown'); Array.prototype.forEach.call(selects, function(el) { el.addEventListener('change', updateTextArea); }); 

 <textarea id="mytext"></textarea> <select class="dropdown"> <option value="">None</option> <option value="text1">text1</option> <option value="text2">text2</option> <option value="text3">text3</option> <option value="text4">text4</option> </select> <select class="dropdown"> <option value="">None</option> <option value="text5">text5</option> <option value="text6">text6</option> <option value="text7">text7</option> <option value="text8">text8</option> </select> 

JS小提琴演示 。

请注意，在HTML中，我已经从使用id更改为识别<select>元素，使用class ; 只是因为它允许一组元素关联在一起，而不必使用大量的id ，随后必须依次用HTML更新JavaScript。

Referencs：

• Array.prototype.filter() 。
• Array.prototype.forEach() 。
• Array.prototype.join() 。
• Array.prototype.map() 。
• document.querySelectorAll() 。
• eventTarget.addEventListener() 。
• Function.prototype.call() 。