admin管理员组

文章数量:1357281

Just wondering if someone can help me on a problem, I don't fully undersand why it doesn't work.

I have this fiddle, /

What it is doing: When you select from the drop down box, insert that word into the textarea. Which it DOES, when the textarea isn't "touched".

If you type something into the box, and then try to select an item, it doesn't work.

I'm not sure why this doesn't update the textarea. Perhaps someone can shed some light on this issue?

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

Just wondering if someone can help me on a problem, I don't fully undersand why it doesn't work.

I have this fiddle, http://jsfiddle/uomt99zp/

What it is doing: When you select from the drop down box, insert that word into the textarea. Which it DOES, when the textarea isn't "touched".

If you type something into the box, and then try to select an item, it doesn't work.

I'm not sure why this doesn't update the textarea. Perhaps someone can shed some light on this issue?

<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);
});
  • javascript
  • jquery
Share Improve this question asked Mar 25, 2015 at 5:19 JustinJustin 2,5307 gold badges43 silver badges78 bronze badges 1
  • just use $('.template').val(text);...here is updates fiddle jsfiddle/uomt99zp/4 – Uiupdates Commented Mar 25, 2015 at 5:43
Add a ment  | 

8 Answers 8

Reset to default 8

You need to set value using .val():

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

Working Demo 1

Also .val() can have callback function which can be used for setting a new value:

function Type: Function( Integer index, String value ) => String A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

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

Working Demo 2

You can try val(function) with old value + new text to append,

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

Live Demo

To answer to the "why" it does not work, it's because, the contents of a textarea represent its default value. So, when you append an element to the textarea, you change the default value of this textarea.

So it changes the textarea as long as you did not type in. Once you typed in, the default value is no more used, even if you remove all the text of the textarea.

By using .append you are just concatinating your output string if you want only the dropdown element it would be better to use the .text() or .val() method 

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

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

.append(), .html() and .text() methods do not work with form elements, for setting/getting value of a from element .val() method should be used instead:

Your code is working ...i tried it in visual studio .... Only change I had made is I kept the script under the option control... I am not sure about.for me its working fine.

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

You should control input value's with val() method

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

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

just replace append with text

here is the updated fiddle

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

// $('.template').val(text); this won't work in IE <= 7 });

http://jsfiddle/rrehan/uomt99zp/2/

本文标签： javascriptjQuery SELECT with TextareaStack Overflow

版权声明：本文标题：javascript - jQuery SELECT with Textarea - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744068260a2585409.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。