Question

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

active1      <      inactive1
active2  EDIT USER  inactive2
active3      >      inactive3

活动列表和非活动列表都是选择框，而＆lt;编辑＆gt;是发布到PHP的按钮。如果＆lt; php将回发到php面板。＆GT;按下按钮，但发布到EDIT USER按钮的其他页面。

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

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

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

Answer 1

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

以下是javascript中jQuery库使用的简短介绍，您可以在这里了解更多关于http://jquery.com/的内容。

＆＃13;

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

＆＃13;

select {
    width : 100px;
}

.resize {
    width : 100px;
    height : 100px;
    float : left;
}

.resize div {
    height : 33%;
}

.resize button {
    height : 100%;
    width : 100%;
}

＆＃13;

<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>

＆＃13;

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

祝你好运

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

1 个答案: