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

Question

我正在尝试创建一个管理页面，允许管理员编辑、激活或停用用户。我脑海中的格式是在左侧为事件用户提供一个大小为 10 的选择列表，在右侧为非事件用户提供另一个相同的选择列表。给出基本格式:

active1      <      inactive1
active2  EDIT USER  inactive2
active3      >      inactive3 

其中事件列表和非事件列表都是选择框，< EDIT > 是发布到 php.ini 的按钮。如果按下 < > 按钮，php 将回发到 php 面板，但如果按下 EDIT USER 按钮，则回发到不同的页面。

我遇到了这方面的问题，这应该是显而易见的。 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>

现在轮到您继续使用我提供的代码或从头开始完成您的任务。

祝你好运