Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

JS Fiddle demo

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

Referencs：

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

2 个答案: