Question

只是想知道是否有人可以帮助我解决问题，我没有完全解释为什么它不起作用。

它在做什么：从下拉框中选择时，将该单词插入textarea。当textarea没有被“触及”时，它会做什么。

如果您在框中键入内容，然后尝试选择一个项目，则它不起作用。

我不确定为什么这不会更新textarea。也许有人可以对这个问题有所了解？

<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>

$('.templatesAvailableFields').on('change', function() {
        var text = $('.templatesAvailableFields option:selected').text();
        $('.template').append(text);
});

Answer 1

您需要使用.val()设置值：

$('.template').val($('.template').val()+text);

Working Demo 1

同样.val()可以有回调函数，可用于设置新值：

功能类型：函数（整数索引，字符串值）=＆gt;串将值返回到set的函数。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。

$('.template').val(function(i,v){ return v+ text});

Working Demo 2

Answer 2

您可以尝试使用旧值+新文字追加val(function)，

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').val(function(ind,val){
         return val+text;
    });
});

Live Demo

Answer 3

回答＆＃34;为什么＆＃34;它不起作用，因为，textarea的内容代表它的默认值。因此，当您将一个元素附加到textarea时，您可以更改此textarea的默认值。

只要您没有输入，它就会更改textarea。输入后，即使删除了textarea的所有文本，也不会再使用默认值。

Answer 4

通过使用.append，如果只想要下拉元素，那么你只需要输出字符串，最好使用.text（）或.val（）方法

Answer 5

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
var existing=$('.template').val();

    $('.template').val(existing+text);
});

.append（）,. html（）和.text（）方法不适用于表单元素，用于设置/获取from元素的值。应该使用.val（）方法：

Answer 6

你的代码正在运行......我在visual studio中尝试过....只有我所做的更改是我将脚本保留在选项控件下...我不确定。因为我的工作正常。< / p>

<body >
<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>
 <script type="text/javascript">

     $('.templatesAvailableFields').on('change', function () {
         var text = $('.templatesAvailableFields option:selected').text();
         $('.template').append(text);
     });
    </script>
</body>

Answer 7

您应该使用val（）方法

来控制输入值

// cache element
var $select = $('.templatesAvailableFields');

$select.change( function() {
  $('.template').val($select[0].value);
});

Answer 8

只需用文字替换附加

这里是更新的小提琴

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').text($('.template').text() + text);

// $（＆＃39; .template＆＃39;）。val（text）;这不会在IE＆lt; = 7中工作 }）;

http://jsfiddle.net/rrehan/uomt99zp/2/

使用Textarea进行jQuery SELECT

8 个答案:

Working Demo 1

Working Demo 2