Wednesday, 26 June 2013

Multiple Select box with select & disable concept



Download Coading : Multiple select field


Index :



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="chosen.css" rel="stylesheet" />
<title>Multiple Select box with select & disable concept</title>
</head>

<body>

          <p><em>Multiple Select</em>&nbsp;&nbsp;
          <select data-placeholder=" Types Your Favorite"  multiple class="chzn-select" tabindex="8" size="20" >
            <option value=""></option>
            <option>Web Designing</option>
            <option>Web Developer</option>
            <option>Web Hosting</option>
            <option>IT</option>
            <option selected>Bpo</option>
            <option disabled>Software</option>
            <option selected>Networking</option>
            <option disabled>Web Technology</option>
          </select></p>
        
      
</body>
</html>



Script :


<script src="prototype.js" type="text/javascript"></script>
<script src="chosen.proto.js" type="text/javascript"></script>
 <script type="text/javascript">
        document.observe('dom:loaded', function(evt) {
        var config = {
        '.chzn-select'           : {},
        '.chzn-select-deselect'  : {allow_single_deselect:true},
        '.chzn-select-no-single' : {disable_search_threshold:10},
        '.chzn-select-no-results': {no_results_text: "Oops, nothing found!"},
        '.chzn-select-width'     : {width: "95%"}
        }
        var results = [];
        for (var selector in config) {
        var elements = $$(selector);
        for (var i = 0; i < elements.length; i++) {
          results.push(new Chosen(elements[i],config[selector]));
        }      
        }
        return results;
        });
  </script>