javascript - 如何使用 JQUERY 在 textarea 中添加值

Question

我需要有关在 jquery 中使用 append 的帮助。每次我单击右侧按钮 btnRight 时，所选选项值将添加到文本区域中，因此我使用 append 将值添加到文本区域中。它已经在文本区域中添加了一个值，但该值是“未定义的”。任何人都可以帮助我为什么我得到一个“未定义”的值？

示例 HTML 代码:

<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 代码:

$("#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());
});
}); 

Answer 1

发生了愚蠢的错误...... 当用户单击按钮时，右侧不会保留选定的值。 因为它在右侧移动...您只需要改变方向即可。

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

SEE DEMO

如果用户取消选择右侧的任何项目，则会出现其他问题。那么这个值不会附加到文本区域中。处理这个问题的更好方法是使用右侧的每个选项。

SEE THIS DEMO