Question

我的主管理区域有2个多选菜单，一个用于页面用户，另一个用于页面管理员。

我希望它在管理菜单中选择的用户菜单中自动选择相同的选项，但反之亦然。

这是我尝试的代码，但它只是打破了userOf菜单。

<select multiple id="userOf">
    <option value="1">Page 1</option>
    <option value="2">Page 2</option>
    <option value="3">Page 3</option>
    <option value="4">Page 4</option>
</select>

<br>
<br>
<select multiple id="adminOf">
    <option value="1">Page 1</option>
    <option value="2">Page 2</option>
    <option value="3">Page 3</option>
    <option value="4">Page 4</option>
</select>



<script type="text/javascript">
$("#adminOf").change(function() {
    var selected=[];
    var value;
    $("#adminOf option:selected").each(function() {
        selected.push($(this).attr("value"))
    });

    $("#userOf option").each(function() {
        value=$(this).val();
        if($.inArray(value, selected)){
            $(this).attr("selected","selected");
        }
    });

});
</script>

感谢;

Answer 1

你的意思是这样的：

var $admins = $("#adminOf");
var $users = $("#userOf");
$admins.change(function(e) {
    $admins.find("option").each(function(i,el){
        var isSelected = this.selected,
            index = i;

        $users.find("option").each(function(i){
            if(index == i){
                this.selected = isSelected;
            }
        });
    });
});

http://jsfiddle.net/4t2ugn1k/

Answer 2

我在IE9中测试了下面的代码。它工作正常。它会将adminOf的选择复制到userOf

 $("#adminOf").click(function () {
        var selected = [];
        var value;
        $("#userOf").val([]); //unselect all the elements

        $("#adminOf option:selected").each(function () {
            var valAdmin = $(this).attr("value");
            $("#userOf option").each(function () {
                var valUser = $(this).attr("value");
                if (valAdmin === valUser) {
                    $(this).attr("selected", "selected");
                }
            });
        });
    });

使用jQuery根据其他多选项的选择填充多项选择

2 个答案: