將選擇的項目從選擇轉移到div並返回

Question

我試圖實現某些功能，但我不知道它是否可能。 在一個頁面上，我有一個選擇框，有很多選項。同一頁面上還有一個div部分。 我希望能夠選擇一個或多個選項，按下按鈕並使選定的項目從選擇框中消失，並出現在div內。而且所有這些都按順序排列。

現在，我已經得到了代碼的工作這部分（不得不承認，我「借」從幾個地方的代碼...）

code: 

JSFiddle

第二部分我d喜歡實現的是能夠選擇div中的元素，單擊另一個按鈕，並將元素從div中刪除並重新出現在選擇框中。再次排序。

我想我必須改變從選擇框轉換爲div（可能轉換爲li？）時元素的類型，以便它們可以被選擇，並且在返回時，再次將類型轉換爲<option>，但我不知道如何......

現在當我選擇一個選項並將其帶到div時，div中的文本也具有'<option>'...'</option>'的形式，因爲它已被完全複製。

我希望我在這裏有意義，我希望有人能指引我走向正確的方向。如果我以完全錯誤的方式討論這個問題，請告訴我。順便說一句，如果我使用兩個選擇框很容易，但我不能。它必須是一個選擇框和一個DIV ......

謝謝你，漢斯

Answer 1

正如我們在主發表評論說，這裏有一些問題，你有：

如何選擇元素在jQuery中

我知道你知道，但在你的例子中你想要將元素從div移動到另一個，那麼你需要爲put each value in a div（然後你可以選擇每個元素）。

如何讓DIV選擇

你的第二個問題是，你希望能夠在右邊的框中選擇的div他們在選擇複製回：

$("body").on("click", ".rightElements", function(key, element){ 
    $(element).addClass("selected"); 
}) 

然後你就可以這樣做：

$(".rightToLeftButton").click(function(){ 
    // Your $(".selected") divs value go to the select 
}); 

這段代碼提供了新的問題：

如何在點擊其他div時取消選擇？

如何選擇多個div？

等等，等等

（我敢肯定與實踐，測試和邏輯分析，你會做的！）

如果你達到了這些要點，你可以實現所有其他問題，當你遇到一個問題，你不能用一個獨特的短語解釋（誰可以長:)），問你是否沒有幾個問題，將它們分開並尋找答案！

似乎粗魯，但你應該看看：

• http://eloquentjavascript.net/
• https://jquery.com/
• https://developer.mozilla.org/en/docs/Web/JavaScript
• https://stackoverflow.com/tags/javascript/info

問候，