使用 javascript / jquery 自动选择选择选项答案

【问题标题】：autoselect select options with javascript / jquery使用 javascript / jquery 自动选择选择选项
【发布时间】：2014-02-18 17:05:26
【问题描述】：

我正在开发 Javascript/jQuery 中的函数。该函数将在“select”元素“Y”中搜索用户名，并在您使用 ', ', ', 复制文本区域“X”中的一堆用户名时选择它们strong>', ';' 或 ' ' 作为分隔符，如果你反之亦然：

javascript/jQuery:

$(document).ready(function() {
    $("dd#id-element select#id").attr({"multiple": "multiple", "size": 25, "name": "id[]"});
});
$(function() {
    $("select#id").change(function() {
                    var selected_id = $(this).val(),
                            selected_name = new Array();
                    $(this).find("option:selected").each(function() {
                        selected_name.push($(this).text());

                    });

                    $("textarea#id_field").val(selected_id);
                    $("textarea#name_field").val(selected_name);
                    console.log(selected_id, selected_name);
                });
                $("textarea#name_field").keyup(function() {
        $("select#id option").removeAttr("selected");
        var names_raw = $(this).val(),
            names = names_raw.replace(/(, | |,)/gi, ";"),
            selected_name = names.split(";"),
            selected_id = new Array();
        $.each(selected_name, function(i, value) {
            if (value != "" && value != null) {
                $("select#id option[label='" + value + "']").attr("selected", true);
                selected_id.push($("select#id option[label='" + value + "']").val());
            }
        });
    });
});

HTML 代码：

<select name="id" id="id">
                        <option value="1092" label="00lara00">00lara00</option>
                        <option value="5105" label="010201e">010201e</option>
                        <option value="1725" label="0411dennis">0411dennis</option>
                        <option value="1795" label="051259">051259</option>
                        <option value="2281" label="0815Timmey">0815Timmey</option>
                        <option value="3337" label="0vlinder0">0vlinder0</option>
                        <option value="127" label="1001gece">1001gece</option>
                        <option value="3693" label="111nizza">111nizza</option>
                        <option value="821" label="114helen">114helen</option>
                        <option value="2887" label="1212whopper">1212whopper</option>
                        <option value="5564" label="123boo">123boo</option>
</select>
<textarea name="name_field" id="name_field"></textarea>

当我在选择元素中选择一些用户名时，它工作正常，用户名被复制到文本区域。当我在 textarea 中粘贴一些用户名时，一切都被取消选择，但没有新选择

【问题讨论】：

我将看起来对我有用...有帮助吗？
抱歉忘记了一些示例代码。这个表单是从 zend 框架加载的，所以我把这个 $(document).ready(function() { $("dd#id-element select#id").attr({"multiple": "multiple", "size": 25, "name": "id[]"}); }); 添加到
我将它添加到我的测试中，并且它在我的测试中工作，所以我猜测其他东西（可能来自 Zend Framework）正在导致事情发生。在这里查看我的测试：jsfiddle.net/c4FZP - 看起来它在那里工作。

标签： javascript jquery html forms select

【解决方案1】：

我终于让它工作了。我就是这样做的

Javascript：

$(document).ready(function() {
    $("dd#id-element select#id").attr({"size": 25});
});
$(function() {
    $("select#id").change(function() {
        var selected_id = $(this).val(),
                selected_name = new Array();
        $(this).find("option:selected").each(function() {
            selected_name.push($(this).text());
            $(this).addClass("checked");
        });
        $("textarea#name_field").val(selected_name);
        $("textarea#name_field").keyup();
    });
    $("textarea#name_field").keyup(function() {
        $("select#id option.checked").attr("checked", null).attr("selected", null).removeClass("checked");
        var names_raw = filterValue($(this).val()),
                names = names_raw.replace(/(, | |,|\s)/gi, ";"),
                selected_name = names.split(";"),
                selected_id = new Array();
        $(this).val(names_raw)
        $.each(selected_name, function(i, value) {
            if (value != "" && value != null) {
                if ($("select#id option[label='" + value + "']").length > 0) {
                    $("select#id option[label='" + value + "']").attr('checked', 'checked').attr('selected', 'selected').addClass("checked").focus();
                    selected_id.push($("select#id option[label='" + value + "']").val());
                }
            }
        });
        $("select#id").val(selected_id);
    });
});

html代码：

<select name="id[]" id="id" multiple="multiple">
                                <option value="1092" label="00lara00">00lara00</option>
                                <option value="5105" label="010201e">010201e</option>
                                <option value="1725" label="0411dennis">0411dennis</option>
                                <option value="1795" label="051259">051259</option>
                                <option value="2281" label="0815Timmey">0815Timmey</option>
                                <option value="3337" label="0vlinder0">0vlinder0</option>
                                <option value="127" label="1001gece">1001gece</option>
                                <option value="3693" label="111nizza">111nizza</option>
                                <option value="821" label="114helen">114helen</option>
                                <option value="2887" label="1212whopper">1212whopper</option>
                                <option value="5564" label="123boo">123boo</option>
 </select>
 <textarea name="name_field" id="name_field"></textarea>

【讨论】：