javascript - How to add value in textarea using JQUERY - Stack Overflow

admin管理员组

文章数量:1336645

I need help about using append in jquery. Everytime I click button right btnRight the selected option value will add in the textarea so I used append to add the value in the textarea. It is already adding a value in the textarea but the value is "undefined,". can anyone help me why I am getting a value "undefined,"?

Sample HTML Code:

<textarea name="include_field_list" cols="70" rows="5" required="required" readonly="readonly" /></textarea>
<section class="container">
<div>
    <select id="leftValues" size="5" multiple="multiple">
    <option value="post_id">Post ID</option>
    <option value="status">Status</option>
    <option value="shipper_name">Shipper Name</option>
       </select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>

    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>

SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
</style>

JQUERY Code:

$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$("#rightValues").append(selectedItem);
/***********This code has a problem************/
$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value + ',');
/***************/
});

$("#leftValues").change(function () {
var selectedItem = $("#rightValues  option:selected");
$("#txtRight").val(selectedItem.text());
});
}); 

I need help about using append in jquery. Everytime I click button right btnRight the selected option value will add in the textarea so I used append to add the value in the textarea. It is already adding a value in the textarea but the value is "undefined,". can anyone help me why I am getting a value "undefined,"?

Sample HTML Code:

<textarea name="include_field_list" cols="70" rows="5" required="required" readonly="readonly" /></textarea>
<section class="container">
<div>
    <select id="leftValues" size="5" multiple="multiple">
    <option value="post_id">Post ID</option>
    <option value="status">Status</option>
    <option value="shipper_name">Shipper Name</option>
       </select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>

    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>

SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
</style>

JQUERY Code:

$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$("#rightValues").append(selectedItem);
/***********This code has a problem************/
$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value + ',');
/***************/
});

$("#leftValues").change(function () {
var selectedItem = $("#rightValues  option:selected");
$("#txtRight").val(selectedItem.text());
});
}); 

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 17, 2015 at 9:10 Never Stop LearningNever Stop Learning 78511 gold badge1010 silver badges3434 bronze badges 1

• why not use .val() method instead of .append()? – ilgaar Commented Jan 17, 2015 at 9:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

there is silly mistake take place... when user click on button the right hand side not remain selected values. because it's move on right side... you just need to change your direction.

$value = $( "#rightValues>option:selected" ).text();

SEE DEMO

there is an other problem if user deselect any item on right side. then this value not append in textarea.. the better way to handle this use each option in right side..

SEE THIS DEMO

Second, $(textarea).append(txt) doesn't work like you think.

Instead of .append() sth to <textarea> element simply use:

var $textarea = $("textarea[name=include_field_list]"),
    $oldValue = textarea.val();

    $textarea($oldValue + 'new value text')

In this jsFiddle You have working solution

You can try this code..

$("textarea[name=include_field_list]").val($value + ',');

if you are appending value after existing, then get that value and pass that value in parameter too,

You have to correct ^^^^ indicated code in your code.

$value = $( "#leftValues option:selected" ).val();
                       ^^^^
$("textarea[name=include_field_list]").val($value + ',');
                                     ^^^^^

If you call val() on a multiple-choice select list, you get an array instead of a string. So you are actually trying to append a "," to an array. Try this:

$value = $( "#leftValues>option:selected" ).val();
$("textarea[name=include_field_list]").append($value.join( ", " ) + ',');

The JSFiddle of the fix (Without CSS): http://jsfiddle/hyoLedxw/

本文标签： javascriptHow to add value in textarea using JQUERYStack Overflow