Member Avatar for abhi10kumar

I have dropdown down boxes with multiselect; I'm using jguery to display Dropdown with multiselect; I'm populating Select Locality with Select City dropdown. Now, when I select a city from dropdown It should display its locality in dropdown with multiselect but showing localities in dropdown only.

Code is attached in zip

choosen.zip (76.56 KB)
  • 2 Contributors
  • 2 Replies
  • 272 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by abhi10kumar
Member Avatar for bradly.spicer

I would look at this if it wasn't a download, please post the code snippets ;)

Member Avatar for abhi10kumar 
<!doctype html> 
<html lang="en"> 
<head>
  <link rel="stylesheet" href="chosen/chosen.css" />

  <script>
    // JavaScript Document
    var xmlhttp

    function showCustomer(str)
    {
//  alert(str);
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Your browser does not support AJAX!");
      return;
      }
    var url="locality.php";
    url=url+"?id="+str;
//  alert(url);
    xmlhttp.onreadystatechange=stateChanged;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
    }

    function GetXmlHttpObject()
    {
        if (window.XMLHttpRequest)
          {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          return new XMLHttpRequest();
          }
        if (window.ActiveXObject)
          {
          // code for IE6, IE5
          return new ActiveXObject("Microsoft.XMLHTTP");
          }
        return null;
    }

    function stateChanged()
    {
        if (xmlhttp.readyState==4)
          {
          document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
          }
    }
  </script>
  </head>

  <body>
  <div id="container">
     <div>
        <select style="width:350px;" onChange="showCustomer(this.value)" >
          <option value=""></option>
          <option value="12">American Black Bear</option>
          <option>Asiatic Black Bear</option>
          <option>Brown Bear</option>
          <option>Giant Panda</option>
          <option>Sloth Bear</option>
          <option>Sun Bear</option>
          <option>Polar Bear</option>
          <option>Spectacled Bear</option>
        </select>
        </div>

        <div id="txtHint">   
        <em>Multiple Select</em>
        <select data-placeholder="Type 'C' to view" style="width:350px;" multiple class="chzn-select-no-results" tabindex="11">
          <option value=""></option>
          <option>American Black Bear</option>
          <option>Asiatic Black Bear</option>
          <option>Brown Bear</option>
          <option>Giant Panda</option>
          <option>Sloth Bear</option>
          <option>Sun Bear</option>
          <option>Polar Bear</option>
          <option>Spectacled Bear</option>
        </select>
        </div>
      </div>
    </div>

  </div>
  <script src="chosen/prototype.js" type="text/javascript"></script>
  <script src="chosen/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!"}
    }
    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>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.