MultiSelect

by Salmin Skenderovic

HTML

<!-- debugging only -->
<h4>multiSelect value:</h4>
<p id="output">&nbsp;</p>

<!-- -->
<p></p>

<select name="subjects" multiple="multiple" class="multiSelect" style="height: 600px;">
  <option value="all">Select category</option>

  <option name="subjects" value="Arts_design_and_media">Arts, design and media</option>

  <option name="subjects" value="Astronomy">Astronomy</option>

  <option name="subjects" value="Biology">Biology</option>

  <option name="subjects" value="Biomedical_laboratory_science">Biomedical laboratory science</option>

  <option name="subjects" value="Biomedicine">Biomedicine</option>

  <option name="subjects" value="Business_administration">Business administration</option>

  <option name="subjects" value="Chemistry">Chemistry</option>

  <option name="subjects" value="Commercial_law">Commercial law</option>

  <option name="subjects" value="Comparative_literature">Comparative literature</option>

  <option name="subjects" value="Computer_science">Computer science</option>

  <option name="subjects" value="Computer_science_and_engineering">Computer science and engineering</option>

  <option name="subjects" value="Computer_technology">Computer technology</option>

  <option name="subjects" value="Culinary_arts">Culinary arts</option>

  <option name="subjects" value="Design">Design</option>

  <option name="subjects" value="Earth_science">Earth science</option>

  <option name="subjects" value="Economics">Economics</option>

  <option name="subjects" value="Education">Education</option>

  <option name="subjects" value="Educationeducational_sciencesdidactics">Education/educational sciences/didactics</option>

  <option name="subjects" value="Educational_sciencesdidactics">Educational sciences/didactics</option>

  <option name="subjects" value="Embedded_systems">Embedded systems</option>

  <option name="subjects" value="English">English</option>

  <option name="subjects" value="Entrepreneurship">Entrepreneurship</option>

  <option...

JavaScript

// Array which holds selected categories
var selected = $("select.multiSelect").val() || [];


$(".multiSelect").bind("click", function(e) {

  // Add or Remove from array
  var found = $.inArray(e.target.value, selected);
  if (found >= 0) {
    var index = selected.indexOf(e.target.value);
    selected.splice(index, 1);
  } else {
    selected.push(e.target.value);
  }

  // Update the select
  $(".multiSelect").val(selected);

});

  /* -- Debugging part -- */
  $("#btn").bind("click", function() {

    // Empty output
    $("#output").html("");

    for (i = 0; i < $(".multiSelect").val().length; i++) {
      $("#output").append($(".multiSelect").val()[i]);
      i != $(".multiSelect").val().length - 1 ? $("#output").append(", ") : "";
    }

  });