この記事では、2つのリストボックスを制御してデータを左右に交換するJavaScriptの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
この関数を使用します。この関数は、左のリストボックスのすべての要素を右に移動したり、右のリストボックスのすべての要素を左に移動したり、右のリストボックスのすべての要素を左に移動したり、一度に移動したりできます。
コードコピーは次のとおりです。Functionlistbox_movecross（sourceid、destid）{
var src = document.getElementById（sourceID）;
var dest = document.getElementbyid（destid）;
for（var count = 0; count <src.options.length; count ++）{
if（src.options [count] .selected == true）{
var option = src.options [count];
var newoption = document.createelement（ "option"）;
newoption.value = option.value;
newoption.text = option.text;
newoption.selected = true;
試す {
Dest.Add（newoption、null）; //標準
src.remove（count、null）;
} catch（error）{
Dest.Add（newoption）; // IEのみ
src.remove（count）;
}
カウント - ;
}
}
}
// ..
listbox_movecross（ 'CountryList'、 'selectedCountryList'）;
以下は、ブラウザで直接実行できるデモ効果コードです
コードを次のようにコピーします。下のボタンをクリックして、選択したオプションを右または左に移動します。<br>
<表>
<tbody> <tr>
<td>
<選択id = "sourceSelect" size = "10"倍数= "">
<オプション値= "a">アフガニスタン</option>
<オプション値= "b"> bahamas </option>
<オプション値= "c"> barbados </option>
<オプション値= "d">ベルギー</option>
<オプション値= "e"> bhutan </option>
<オプション値= "f">中国</option>
<オプション値= "g">クロアチア</option>
<オプション値= "h"> denmark </option>
<オプション値= "i">フランス</option>
</select>
</td>
<td>
<button onclick = "listboxmovecross（ 'sourceselect'、 'destselect'）;" >>>> </button> <br>
<button onclick = "listboxmovecross（ 'destselect'、 'sourceselect'）;"> <<</button>
</td>
<td>
<select id = "destselect" size = "10"倍数= "">
<オプション値= "a">アフガニスタン</option>
<オプション値= "b"> bahamas </option>
<オプション値= "c"> barbados </option>
<オプション値= "d">ベルギー</option>
<オプション値= "e"> bhutan </option>
<オプション値= "f">中国</option>
<オプション値= "g">クロアチア</option>
<オプション値= "h"> denmark </option>
<オプション値= "i">フランス</option>
</select>
</td>
</tr>
</tbody> </table>
<スクリプト>
function listboxmovecross（sourceid、destid）{
var src = document.getElementById（sourceID）;
var dest = document.getElementbyid（destid）;
for（var count = 0; count <src.options.length; count ++）{
if（src.options [count] .selected == true）{
var option = src.options [count];
var newoption = document.createelement（ "option"）;
newoption.value = option.value;
newoption.text = option.text;
newoption.selected = true;
試す {
Dest.Add（newoption、null）; //標準
src.remove（count、null）;
} catch（error）{
Dest.Add（newoption）; // IEのみ
src.remove（count）;
}
カウント - ;
}
}
}
</script>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。