CODEWITHSUNDEEP
javascripthtmlformsselect
1484
1484

Reputation: 63

How can I create two select lists and only allow one selection?

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.

Upvotes: 0

Views: 831

Answers (1)

Logan Murphy
Logan Murphy

Reputation: 6230

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

Upvotes: 3

Related Questions