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

【问题标题】：How can I create two select lists and only allow one selection?如何创建两个选择列表并且只允许一个选择？
【发布时间】：2015-02-21 20:49:20
【问题描述】：

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

active1      <      inactive1
active2  EDIT USER  inactive2
active3      >      inactive3

活动列表和非活动列表都是选择框，是发布到 php.ini 的按钮。如果按下按钮，php 将回发到 php 面板，但为 EDIT USER 按钮发布到不同的页面。

我遇到了这个问题，这应该是显而易见的。 IE 允许选择在两个窗口上都处于活动状态。那么如果我选择了一个活跃的和不活跃的，我该如何协调哪个应该被编辑或移动呢？

所以第一个问题是，我如何（或者我可以）创建两个选择框，并且一次只允许选择一个。

其次，Chrome 甚至不允许我从非活动列表中选择任何内容。如果我立即正确地做事，也许这会得到解决。

【问题讨论】：

您需要 JavaScript。你试过吗？
诚然，这不是我的强项。这可以解释为什么我在 HTML 部分中找不到任何实质性的答案。我将更新我的标签以反映范围。

标签： javascript html forms select

【解决方案1】：

如果您想成为 Web 开发人员，Javascript 将是一门非常重要的语言。我建议首先学习像 jQuery 这样的 dom 操作库（一旦你获得更多经验，我会推荐 angular 或其他 MVVM javascript 库）。

这里简要介绍了 jQuery 库在 javascript 中的使用，您可以在此处了解更多信息 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>

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

祝你好运

【讨论】：