Question

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

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

如果用户取消选择右侧的任何项目，则还有其他问题。然后这个值不会附加在textarea中...更好的处理方法是使用右侧的每个选项..

SEE THIS DEMO

Answer 2

其次，$（textarea）.append（txt）并不像你想的那样工作。

而不是.append()某某到<textarea>元素，只需使用：

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

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

在这个jsFiddle中你有working solution

Answer 3

您可以尝试此代码..

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

如果要在现有值后附加值，则获取该值并在参数中传递该值，

Answer 4

您必须更正代码中的^^^^代码。

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

Answer 5

如果在多选选择列表上调用val（），则会得到一个数组而不是字符串。所以你实际上是想把一个“，”添加到一个数组中。试试这个：

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

修复的JSFiddle（没有CSS）：http://jsfiddle.net/hyoLedxw/

如何使用JQUERY在textarea中添加值

5 个答案: