如何創建兩個選擇列表並只允許一個選擇？

Question

我試圖創建一個管理頁面，允許管理員編輯，激活或停用用戶。我頭腦中的格式是左側的活動用戶有一個選擇列表大小10，右側的活動用戶有另一個相同的選擇列表。爲了讓基本格式：

active1  <  inactive1 
active2 EDIT USER inactive2 
active3  >  inactive3 

如果雙方的活動列表和非激活名單的選擇框，並<編輯>是張貼到PHP的按鈕。如果按下了<>按鈕，php會回發到php面板，但發佈到編輯用戶按鈕的不同頁面。

我遇到了這個問題，這應該是顯而易見的。 IE允許選擇在兩個窗口中都處於活動狀態。所以如果我選擇一個活動和不活動，我該如何協調哪些應該被編輯或移動？

所以問題的第一個問題是，我如何（或可以）創建兩個選擇框，並且一次只允許選擇一個。

其次，Chrome甚至沒有允許我從非活動列表中選擇任何東西。如果我正確地做了正確的事情，也許這會得到解決。

Answer 1

如果你想成爲一個Web開發人員，Javascript將成爲一種非常重要的語言。我會建議先學習像jQuery這樣的dom操作庫（一旦你獲得了更多的經驗，我會推薦angular或其他MVVM javascript庫）。

下面是在javascript中使用jQuery庫的簡短介紹，您可以在這裏瞭解更多關於http://jquery.com/的信息。

var selects = $("select"); //get every select tag (kind of like a css selector) and store them 
 

 
selects.on("change", function() { //when any of those select tag's values change 
 
    var didntChange = selects.not(this); //get the tag the didn't just change and store it 
 
    didntChange.val(""); //remove its value 
 
    enabler(); //call the enabler function 
 
}); 
 

 
//function declaration - enables and disables buttons as necessary 
 
function enabler() { 
 
    $("#activator").prop("disabled", !$("#inactive").val()); //disable activator if no inactive value 
 
    $("#deactivator").prop("disabled", !$("#active").val()); //disable deactivator if no active value 
 
    $("#editor").prop("disabled", !$("#active").val() && !$("#inactive").val()); //disable editor if no values 
 
} 
 

 
enabler(); //invoke/call the enabler function

select { 
 
    width : 100px; 
 
} 
 

 
.resize { 
 
    width : 100px; 
 
    height : 100px; 
 
    float : left; 
 
} 
 

 
.resize div { 
 
    height : 33%; 
 
} 
 

 
.resize button { 
 
    height : 100%; 
 
    width : 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="active" class="resize"> 
 
    <option>a</option> 
 
    <option>b</option> 
 
    <option>c</option> 
 
</select> 
 
<div class="resize"> 
 
    <div> 
 
    <button id="activator">&lt;</button> 
 
    </div> 
 
    <div> 
 
    <button id="editor">Edit</button>  
 
    </div> 
 
    <div> 
 
    <button id="deactivator">&gt;</button> 
 
    </div> 
 
</div> 
 
<select multiple="multiple" id="inactive" class="resize"> 
 
    <option>a</option> 
 
    <option>b</option> 
 
    <option>c</option> 
 
</select>

現在輪到你繼續與我公司提供或從頭開始完成你的任務的代碼。

好運