我如何创建两个选择列表并只允许一个选择？ [英] How can I create two select lists and only allow one selection?

问题描述

我试图创建一个管理员页面，允许管理员编辑，激活或停用用户。我头脑中的格式是左侧的活动用户有一个选择列表大小10，右侧的活动用户有另一个相同的选择列表。给出一个基本格式：

  active1< inactive1 
 active2 EDIT USER inactive2 
 active3> inactive3 
  

在活动列表和非活动列表都是选择框的情况下，<编辑>是发布到PHP的按钮。如果< php>将回发到php面板， >按钮被按下，但是发布到EDIT USER按钮的不同页面。

我遇到了这个问题，这应该很明显。 IE允许选择在两个窗口中都处于活动状态。所以，如果我选择一个活动和不活动，我应该如何协调哪些应该被编辑或移动？

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

其次，Chrome甚至不允许我从非活动列表中选择任何内容。如果我正确地做了正确的事情，也许会被整理出来。

解决方案

Javascript将成为一种非常重要的语言如果你想成为一个网络开发者我会建议先学习一个像jQuery这样的dom操作库（一旦你获得了更多的经验，我会建议使用angular或另一个MVVM javascript库）。

这是一个简短的介绍在JavaScript中使用jQuery库，您可以在这里了解更多关于的信息。

  var choices = $（select）; //获取每个选择标记（有点像css选择器）并存储themselects.on（change，function（）{//当这些选择标记的值中的任何一个改变时var didntChange = selects.not（this）; // （）; //移除其值enabler（）; //调用启用函数}）; //函数声明 - 根据需要启用和禁用按钮function enabler （）{$（＃activator）。prop（disabled，！$（＃inactive）。val（））; （＃deactivator）。prop（disabled，！$（＃active）。val（））; //禁用激活器。 （＃）。prop（disabled，！$（＃active）。val（）&&！$（＃inactive）。val（） ）; //禁用编辑器，如果没有值} enabler（）; //调用enabler函数 

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 =multipleid =activeclass =resize > <选项>一种与LT; /选项> <选项> b将/选项> < option> c< / option>< / select>< div class =resize> < DIV> < button id =activator>& lt;< / button> < / DIV> < DIV> < button id =editor>编辑< / button> < / DIV> < DIV> < button id =deactivator>& gt;< / button> < / div>< / div>< select multiple =multipleid =inactiveclass =resize> <选项>一种与LT; /选项> <选项> b将/选项> < / option> c< / option>< / select>

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

好运

I'm trying to create an admin page that allows an admin to edit, activate, or inactive users. The format I have in my head is to have a select list size 10 on the left for the active users, and another identical select list on the right for the inactive users. To give a basic format:

active1      <      inactive1
active2  EDIT USER  inactive2
active3      >      inactive3 

Where both the active list and inactive list are select boxes, and the < EDIT > are buttons that post to php. The php would post back to the php panel if the < > buttons are pressed, but post to a different page for the EDIT USER button.

I am running into problems with this, which should be obvious. IE allows a selection to be active on both windows. So if I select an active and inactive, how do I reconcile which should be edited or moved?

So problem number one is, how do I (or can I) create two select boxes and only allow one to be selected at a time.

Second, Chrome is not even allowing me to select anything from the inactive list. Maybe that gets sorted out if I do things correctly off the bat.

解决方案

Javascript is going to be a very important language to pick up if you want to become a web developer. I would recommend learning a dom manipulation library like jQuery at first (once you get more experience i would recommend angular or another MVVM javascript library).

Here is a short introduction to the use of the jQuery library in javascript which you can learn more about here 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>

Now its your turn to continue with the code I provided or start from scratch to complete your task.

Good Luck

这篇关于我如何创建两个选择列表并只允许一个选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！