0

我试图弄清楚如何在 javascript 中同步两个多项选择列表。这是有效的代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>

<script language="JavaScript">
<!--

function SelectEmail(name)
{
    var listboxEmails = document.getElementById('emails');
    for (var i=0;i<listboxEmails.length;i++)
    {
        listboxname = listboxEmails[i].innerHTML
        if (listboxname == name)
        {
            listboxEmails.selectedIndex = i;
            break;
        }
    }//end for 
}//end function SelectEmail

// -->
</script>
<body>
<select id='names' name ='names' style = "width: 100" multiple="multiple" onClick="SelectEmail(this.value);">
    <option value ="joe">joe</option>
    <option value ="albert">albert</option>
    <option value ="gary">gary</option>
    <option value ="ace">ace</option>
</select>

<select id="emails" name ="emails" style = "width: 100;"  multiple="multiple">
    <option value ="joe@asds.com">joe</option>
    <option value ="albert@asds.com">albert</option>
    <option value ="gary@asds.com">gary</option>
    <option value ="ace@asds.com">ace</option>
</SELECT>
</body>
</html>

但是我想让它显示多种选择。因此，例如，如果我在左侧列表中选择 albert 和 gary，我希望右侧列表也选择 albert 和 gary。请帮我解决一下这个。干杯。

4

1 回答 1

0

您的功能SelectEmail()无法工作，因为它设置selectedIndex了您的选择，它选择了一个选项并取消选择其余选项。此外，您正在使用选项的文本内容，#emails以便将它们与#names. 这不是一个好的做法，因为文本节点应该显示文本而不是启用脚本中元素的识别。相反，您可以selected为要选择的每个选项单独访问该属性。通过向元素的选项添加附加属性#emails，它可能如下所示：

<select id="emails" name="emails" style="width: 100;" multiple="multiple">
    <option value="joe@asds.com" data-name="joe">joe</option>
    <option value="albert@asds.com" data-name="albert">albert</option>
    <option value="gary@asds.com" data-name="gary">gary</option>
    <option value="ace@asds.com" data-name="ace">ace</option>
</select>

您现在可以使用该data-name属性来映射选项，例如通过以下方式：

function selectEmail() {
    // deselect all
    $('#emails option').removeAttr('selected');
    var names = $('#names').val();
    if (names == null) {
        // none selected
        return;
    }
    $.each(names, function (i, name) {
        var selector = 'option[data-name="' + name + '"]';
        $('#emails ' + selector).attr('selected', true);
    });
}

这是一个工作小提琴（你会注意到我也使用了onchange事件而不是：http onclick: //jsfiddle.net/H9hNH/2/

于 2013-01-29T13:29:06.923 回答