0

javascript で 2 つの複数選択リストを同期する方法を見つけようとしています。動作するコードは次のとおりです。

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

ただし、複数の選択肢を表示させたいです。たとえば、左側のリストでアルバートとゲイリーを選択した場合、右側のリストでもアルバートとゲイリーを選択する必要があります。これで私を助けてください。乾杯。

4

1 に答える 1

0

1つのオプションを選択し、残りのオプションを選択解除するselectを設定するため、関数は機能SelectEmail()しません。また、の値でオプションをマップするためにselectedIndex、オプションのテキストコンテンツを使用しています。テキストノードはテキストを表示し、スクリプト内の要素の識別を有効にしないことになっているため、これは良い習慣ではありません。代わりに、選択するオプションごとに個別に属性にアクセスできます。要素のオプションに属性を追加すると、次のようになります。#emails#namesselected#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://jsfiddle.net/H9hNH/2/の代わりにイベントを使用したことに気付くでしょう：http onclick： //jsfiddle.net/H9hNH/2/

于 2013-01-29T13:29:06.923 に答える