如何创建两个选择列表并只允许一个选择？

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>

现在轮到你继续与我公司提供或从头开始完成你的任务的代码。

好运