如何切換兩個選擇元素之間的選定值

-2

如何切換包含相同信息的2個元素的選定值2 select。如何切換兩個選擇元素之間的選定值

當前情況如下：選擇要翻譯並翻譯的語言。爲了讓用戶更容易，我想提供將源語言切換到目標語言的可能性，反之亦然。

的HTML標記的簡化版本是下列之一：

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

的語言有兩個select元件是相同的。我試圖實現的功能非常類似於谷歌翻譯開關語言箭頭。

原因是該框是用於翻譯textarea。整個代碼更大，語言更多，我只是拿出需要的內容來保持簡短。

來源

2017-07-09 SeekLoad

AndyTurner爲什麼我得到一個「 - 」號這個問題？ – SeekLoad

你有什麼嘗試？沒有什麼能阻止你像這樣分配硬編碼名稱。對於downvote的問題，請向下閱讀箭頭，它清楚地提到人們爲什麼應該倒退或不倒退（沒有研究努力，不是有用的或不清楚的） – Icepickle

這並不清楚，但問題很複雜。我現在編輯了一下，在我發佈後僅僅2秒就投了票，我甚至沒有時間看它並編輯一下。 – SeekLoad

假設您在兩種語言中都具有相同的語言，您只需將選擇從一個框更改爲另一個。該腳本將讀取兩個選擇下拉列表中的當前選定值，然後在單擊交換時在另一個下拉列表中搜索選項。

如果語言真的在同一個地方，最簡單的方法我能想到的會是這樣：

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>

來源

2017-07-09 22:13:27 Icepickle

如何切換兩個選擇元素之間的選定值

回答

相關問題