請問有可能利用下拉式選單實現(xiàn)給予不同<textarea>不同的內(nèi)容嗎?

例如像以下例子,但這只能填入一個<textarea>
我希望選擇1-5之後,能夠把下面五個<textarea>依序填入1-5
第一個填入1第二個填入2第三個填入3第四個填入4第五個填入5

          <select id="template">
          <option value=" ">不選取</option>
          <option value="1">1-5</option>
        </select>
            <div class="form-group">
              <textarea id="opinion" cols="30" rows="3" datatype="1" class="form-control" placeholder="尚未輸入"></textarea>
            </div> 
            <div class="form-group">
              <textarea id="opinion" cols="30" rows="3" datatype="1" class="form-control" placeholder="尚未輸入"></textarea>
            </div>
            <div class="form-group">
              <textarea id="opinion" cols="30" rows="3" datatype="1" class="form-control" placeholder="尚未輸入"></textarea>
            </div>
            <div class="form-group">
              <textarea id="opinion" cols="30" rows="3" datatype="1" class="form-control" placeholder="尚未輸入"></textarea>
            </div>
            <div class="form-group">
              <textarea id="opinion" cols="30" rows="3" datatype="1" class="form-control" placeholder="尚未輸入"></textarea>
            </div>        
            <script src="https://www.ruten.com.tw/js/jquery-1.7.1.min.js"></script>
            <script type="text/javascript">
            $(function () {
              $('#template').change(function () {
                var template = $(this).val();
                if (template !== '') {
                  $('#opinion').val(template).trigger('change');
                }
              });
            });
            </script>

回答

編輯回答

尛曖昧

cc_christian 非常感謝您為我解答這個問題,但是這好像只限於使用數(shù)字,有幾個<textarea>他就往上加上去
其實我想達成的效果是連英文或國字也可以實現(xiàn),例如我的下拉式選單內(nèi)容有a-e和36計1-5計
當我點選a-e他能填入下面五個<textarea>依序1.a 2.b 3.c 4.d 5.e
當我再點選36計1-5計他能接著填入1.瞞天過海 2.圍魏救趙 3.借刀殺人 4.以逸待勞 5.趁火打劫而不刪掉之前的a-e
不知道這樣有沒有可能實現(xiàn)呢?

2018年6月8日 06:48

編輯回答

莫小染

$(function () {
  $('#template').change(function () {
      var template = $(this).val();
    if (template !== '') {
        template = parseInt(template);
      $('.form-control').each(function() {
          $(this).val(template);
        template++;
      });
    }
  });
});

修改如下：

<select id="template">
  <option value="clear">不選取</option>
  <option value="num">1-5</option>
  <option value="letter">a-e</option>
  <option value="str">1-5計</option>
</select>

$(function () {
  let num = [1,2,3,4,5], 
      letter = ['a','b', 'c', 'd', 'e'], 
      str = ['瞞天過海', '圍魏救趙', '借刀殺人', '以逸待勞','趁火打劫'];

  $('#template').change(function () {
    let template = $(this).val();

    if (template === 'num') {
      $('.form-control').each(function(i) {
          let text = $(this).val() + num[i];
        $(this).val(text);
      })
    } else if(template === 'letter') {
      $('.form-control').each(function(i) { 
        let text = $(this).val() + letter[i];
        $(this).val(text);
      });
    } else if(template === 'str') {
      $('.form-control').each(function(i) {
        let text = $(this).val() + str[i];
        $(this).val(text);
      });
    }  
  });
});

2017年10月17日 02:08