Question

当我在标题中写道时，我需要在选择字段更改时更改textarea文本。

＆＃13;

$('#sel').on('change', function() {
  var option = $('option:selected', this).val();
  $('#message').text(option);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
  <select class="form-control  input-margin" id="sel" placeholder="Select A Message">
    <option value="" selected="" disabled="">Just write my own message</option>
    <option value="Have a great day, happy birthday!">Have a great day, happy birthday!</option>
    <option value="Happy birthday to you!">Happy birthday to you!</option>
    <option value="Have a lovely day.">Have a lovely day.</option>
  </select>
</div>
<div class="col-md-6">
  <textarea id="message" name="message" class="form-control input-margin" style="width:1000px !important; height: 200px !important;" type="text" placeholder="Write a Message here." parsley-required="true" data-parsley-group="first"></textarea>
</div>

＆＃13;

当我改变选择字段的值时，textarea中什么都没有发生？为什么？你在这看到任何错误吗？什么可以解决？

Answer 1

您需要将代码放入 $（document）.ready（）

.ready() - 当加载DOM（文档对象模型）时，就会发生就绪事件。

因为此事件在文档准备好后发生，所以它是获取所有其他jQuery事件和函数的好地方。就像上面的例子一样。

请参阅以下代码

＆＃13;

$(document).ready(function(){
  $('#sel').on('change', function() {
    var option = $('option:selected', this).val();

  $('#message').text(option);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="col-md-6">
           <select class="form-control  input-margin" id="sel" placeholder="Select A Message">
    <option value="" selected="" disabled="">Just write my own message</option>
<option value="Have a great day, happy birthday!">Have a great day, happy birthday!</option>
<option value="Happy birthday to you!">Happy birthday to you!</option>
<option value="Have a lovely day.">Have a lovely day.</option>


      </select>
      </div>
<div class="col-md-6">
      <textarea id="message" name="message" class="form-control input-margin" style="width:1000px !important; height: 200px !important;" type="text" placeholder="Write a Message here." parsley-required="true" data-parsley-group="first"></textarea>
      </div>

＆＃13;

修改： - 并且请勿忘记将HTML页面上的引用添加到<head>标记中，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Answer 2

在头标记中添加脚本，即

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#sel').on('change', function() {
  var option = $('option:selected', this).val();

$('#message').text(option);
});
});
</script>

将此标记放入正文标记

<div class="col-md-6">
           <select class="form-control  input-margin" id="sel" placeholder="Select A Message">
    <option value="" selected="" disabled="">Just write my own message</option>
<option value="Have a great day, happy birthday!">Have a great day, happy birthday!</option>
<option value="Happy birthday to you!">Happy birthday to you!</option>
<option value="Have a lovely day.">Have a lovely day.</option>


      </select>
      </div>
<div class="col-md-6">
      <textarea id="message" name="message" class="form-control input-margin" style="width:1000px !important; height: 200px !important;" type="text" placeholder="Write a Message here." parsley-required="true" data-parsley-group="first"></textarea>
      </div>

需要在选择字段更改时更改textarea文本

2 个答案: