假设两种语言都相同,只需将选择从一个框更改为另一个框。该脚本将在两个“选择”下拉列表中读取当前选定值,然后在单击“交换”时在另一个下拉列表中搜索该选项。
function swapBySelectedIndex( selector1, selector2 ) {
// get both elements and save the selectedIndex of the first element
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
// set the first element to the second elements selectedIndex
elem1.selectedIndex = elem2.selectedIndex;
// set the second elements' selectedIndex to the saved index
elem2.selectedIndex = selectedOption1;
}
function getSelectedOption( elem ) {
return elem.options[elem.selectedIndex].value;
}
function setSelectedOption( elem, value ) {
for (let i = 0; i < elem.options.length; i++) {
elem.options[i].selected = value === elem.options[i].value;
}
}
function swapByOptionValue( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = getSelectedOption( elem1 ),
selectedOption2 = getSelectedOption( elem2 );
setSelectedOption( elem1, selectedOption2 );
setSelectedOption( elem2, selectedOption1 );
}
function swapBySelectedIndex( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
elem1.selectedIndex = elem2.selectedIndex;
elem2.selectedIndex = selectedOption1;
}
<select name="LangA">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
</select>
<select name="LangB">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="sv">Swedish</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
</select>
<button type="button" onClick="swapByOptionValue('select[name=\'LangA\']', 'select[name=\'LangB\']')">Swap selected languages</button>
<button type="button" onClick="swapBySelectedIndex('select[name=\'LangA\']', 'select[name=\'LangB\']')">Swap selected languages (using selectedIndex)</button>
