时间戳

首页 > 解决方案 > 我如何从所选选项中获取多个值并使用换行符放入文本区域

javascript - 我如何从所选选项中获取多个值并使用换行符放入文本区域

问题描述

我已经在使用这个代码块

<div class="col-12 col-md-12 col-sm-12">
    <small>Clique para selecionar e/ou retirar um produto desejado</small>
    <select name="id_produtos" data-label="Produtos" id="produtos" class="form-control show-tick pl-4 pr-4 pb-4 " data-live-search="true" multiple>
        <option value="" disabled>Selecione um produto</option>
        @foreach (var item in Model.Produtos)
        {
            <option value="@item.id_produto">@item.nome</option>
        }
    </select>
    <small>Produtos Selecionados</small>
    @*<label id="produtos-selecionados" class="mm-yyyy form-control"> </label>*@
    <textarea id="produtos-selecionados" class="mm-yyyy form-control" rows="10" cols="40"  minlength="10" maxlength="25" readonly></textarea>
</div>

这个脚本：

$('select[name="id_produtos"]').change(function () {
        var text = $(this).find("option:selected").text();
        if (text != "") {
            text = text;

        }

        $('#produtos-selecionados').val(text);
    });

但没有在文本区域换行。

请帮助我，谢谢顺便说一句。

标签： javascript

解决方案

$(this).find("option:selected")会得到一个或多个元素。因此，.text()一个以上的元素可能会出现问题。您可能可以使用 jQuery 的.map().get().join()链来执行此操作。这样，您可以更好地控制值之间的换行符。

像这样：

$('select[name="id_produtos"]').change(function() {
    var v = $(this).find('option:selected') // Get all selected options
    .map(function() { // For each option return the label text only
        return this.innerText; // or use this.value if that's what you want
    })
    .get() // Get as an array
    .join("\n"); // Join/glue together with line breaks

    $('textarea').val( v ); // Set textarea contents
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="id_produtos" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<textarea rows="5"></textarea>

推荐阅读