Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
​
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
​
  <title>Clicker</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <style type="text/css">
    select { width: 200px }
  </style>
</head>
​
<body>
    <select multiple="" id="categories" name="categories[]">
      <option class="category" value="income">income</option>
      <option class="category" value="gender">gender</option>
      <option class="category" value="age">age</option>
  </select><br /><br />
​
    <select multiple="multiple" id="variables" name="variables[]">
      <option class="income" value="10">$90,000 - $99,999</option>
      <option class="income" value="11">$100,000 - $124,999</option>
      <option class="income" value="12">$125,000 - $149,999</option>
      <option class="income" value="13">Greater than $149,999</option>
      <option class="gender" value="14">Male</option>
      <option class="gender" value="15">Female</option>
      <option class="gender" value="16">Ungendered</option>
      <option class="age" value="17">Ages 18-24</option>
      <option class="age" value="18">Ages 25-34</option>
      <option class="age" value="19">Ages 35-44</option>
    </select><br />
    <button id="add">Add Selected</button><br /><br />
​
    <select height="60" multiple="multiple" id="target" name="target[]">
    </select><br />
    <button id="remove">Remove Selected</button>
</body>
</html>
​
 
$(function(){
 var  opts    = {}, 
      $cats   = $("#categories"), 
      $target = $("#target"),
      $vars   = $("#variables");
 
 $vars.find("option").each(function(){
     var $opt  = $(this),
         cat   = this.className,
         value = this.value,
         label = $opt.text();
     
     if(!opts[cat]) { opts[cat] = []; }
     
     opts[cat].push({label: label, value: value});
​
     $opt.remove();
 });
 
 function update_variables(){
     var cat = $cats.val(), new_opts = [];
     $vars.empty();
​
     $.each(opts[cat], function(){
       if( $target.find('[value=' + this.value + ']').length === 0 ){
         new_opts.push(option(this.value, this.label));
       }
     });
​
     $vars.html(new_opts.join(''));
 }
 
 function option(value, label){
   return "<option value='" + value + "'>" + label + "</option>";
 }
 
 $("#add").click(function(e){
   e.preventDefault();
   $vars.find(':selected').appendTo($target).attr('selected',false);
   update_variables();
 });
 
 $("#remove").click(function(e){
   e.preventDefault();
   $target.find(':selected').remove();
   update_variables();
 });
 
 $cats.change(function(){
   update_variables();
 }).change();
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers