使用javascript / jquery自动选择选项

时间:2014-02-18 17:05:27

标签: javascript jquery html forms select

我正在使用Javascript / jQuery中的函数。 该函数将在“select”元素“Y”中搜索用户名,并在您使用“”,“”,复制textarea“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 code:

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

当我在select元素中选择一些用户名时,它工作正常,用户名被复制到textarea。 当我在textarea中粘贴一些用户名时,所有内容都会被取消选择,但是没有新的选择

1 个答案:

答案 0 :(得分:0)

我终于开始工作了。我就这样做了

使用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>