Question

我想从组合框中选择选项以显示在textarea中。 jsFiddle

这是html：

<select id="header-values" multiple="headervalues" style="width:200px" name="headervalues" >
                            <option selected="">MVA</option>
                            <option>Jet Ski</option>
                            <option>Bus Accident</option>
                            <option>Worker's Comp</option>
                            <option>field1</option>
                            <option>field2</option>
                            <option>field3</option>
                        </select>
                        <br>
                        <textarea id="headervalues-log" class="log" class="ui-widget-content"></textarea>

一旦我选择了任何显示插入textarea的选项，如果我再次选择该选项，则应显示下一个选项。

我尝试了以下代码但不起作用。无法弄清楚出了什么问题，

/*$("select, #header-values").change(function(){
        var selecttext =$('#header-values : selected').val();
        var insertText = $(this).text();
        $('#headervalues-log').append(" "+insertText);
    });*/

$("select, #header-values").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("headervalues-log").text(str);
})

Answer 1

试试这个：

$("select#header-values").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("#headervalues-log").val(str);
})

在jsFiddle

上查看

Answer 2

你可以这样做：

$("#header-values").change(function() {
    var selOption = $(this).find(":selected").text();

    $("#headervalues-log").text(selOption);
});

演示：http://jsfiddle.net/QJ6yQ/7/

在末尾添加此行以进行多项选择，并在从textarea删除条目后选择一个字段。

 $("#headervalues-log").val(function() { 
     return this.value + selOption + ', ' }).prependTo("#headervalues-log");
 });

Answer 3

如果要从选择框中选择并删除，请使用以下appendTo api

$('select option:selected').remove().appendTo($("#headervalues-log"));

其他明智的做法是只使用appendTo追加

$('select option:selected').appendTo($("#headervalues-log"));

使用jquery将选定的字段输入textarea

3 个答案: