1

I am a beginner! and i am stuck on this question since many days. and i need help for this badly! This question might be a little difficult to understand.please read carefully.

I have created a dropdown list DDL1 (a dropdown list of 5 states) and a DYNAMIC DROPDOWNLIST DDL2(which consists of locations in each state). DDL1 is linked to DDL2 in such a way that the values of ddl2 changes on selecting state in ddl1. FOR eg: when u select GOA in ddl1 u see locations of goa in ddl2 (YOU CAN SEE THE CODES BELOW OF LINKING)

i want the options of ddl2 i.e (the locations) when selected and submit button is pressed to open some html pages related to them.

below that i also have one more dropdown list which ive successfully linked because it is not a dynamically linked dropdown list.and linking that was easy because it is in select tag. whereas the ddl2 is in script tag since it is dynamically linked to ddl1.

can some one please tell me the code for linking the ddl2 (i.e goa asf,goa lpg ro etc) to other html pages?

the codes of my page are shown below:

   <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
   <script type="text/javascript">
    function configureDropDownLists(ddl1,ddl2) {
  var goa = ['GOA ASF', 'Goa LPG Plant'];
  var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT''WADALA I  TERMINAL'];
 var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'];
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'];
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];

    switch (ddl1.value) {
    case 'Goa':
        ddl2.options.length = 0;
        for (i = 0; i < goa.length; i++) {
            createOption(ddl2, goa[i],goa[i]);
        }
        break;
    case 'Maharashtra':
        ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i],maharashtra[i]);
        }
        break;
    case 'Rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
            createOption(ddl2, rajasthan[i],rajasthan[i]);
        }
        break;
    case 'Gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
            createOption(ddl2, gujrat[i],gujrat[i]);
        }
        break;
     case 'MadhyaPradesh':
        ddl2.options.length = 0;
        for (i = 0; i < madhyapradesh.length; i++) {
            createOption(ddl2, madhyapradesh[i],madhyapradesh[i])
          }
        break;
        default:
            ddl2.options.length = 0;
        break;
         }

      }

    function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
     }
    </script>
    </HEAD>

    <BODY>
    <div>
     <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>

      <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
      <option value=""></option>
      <option value="Goa">Goa</option>
      <option value="Maharashtra">Maharashtra</option>
      <option value="Rajasthan">Rajasthan</option>
      <option value="Gujrat">Gujrat</option>
      <option value="MadhyaPradesh">MadhyaPradesh</option>
      </select>

       <select id="ddl2">
       </select><br>
       <br>
       <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
      </div> 
        <div>
      <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An ASSET:</H1>
     <form id="link">
    <select multiple="multiple" size="1">

    <option value="http://stackoverflow.com/">4GB RAM PC- Lot 500 HCL</option>
     <option value="http://google.com/">4GB RAM PC- Lot 450 HCL</option>
     <option value="http://yahoo.com/">HD 245 Gold  Lot 50</option>
     <option value="http://bing.com/">Marathon 255 (40)</option>
     <option value="http://php.net/">Wep HQ 2100 (20)</option>
     <option value="ADF Scanner (45)">ADF Scanner (45)</option>       
    </select><BR>

     <br>
     <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; ">
  </form>
  </div>
  <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>
$('#link').on('submit', function (e) {
    e.preventDefault();
    var $form = $(this),
            $select = $form.find('select'),
            links = $select.val();
    if (links.length > 0) {
        for (i in links) {
            link = links[i];
            window.open(link);
        }
    }
  });
    </script>

   </BODY>
    </HTML>

The code given above is my whole pages code. if u run it in html you will know exactly what i have created and what i want to link.
please run it and help me with the codes and its structure if u can. Thankyou

Mike Kinghan
  • 55,740
  • 12
  • 153
  • 182
Neha Shetty
  • 69
  • 1
  • 2
  • 10

2 Answers2

1

IMHO don't mix javascript and jQuery. You already have imported jQuery library so make the best use of it for cascading effects.

jQuery Code:

jQuery(function($) {

  // bind change event to select
  $('#location').on('change', function() {
    var url = $(this).val(); // get selected value
    if (url) { // require a URL
      window.location = url; // redirect
    }
    return false;
  });

  var hashtable = {};
  hashtable['GOA ASF'] = 'https://stackoverflow.com/';
  hashtable['Goa LPG Plant'] = 'http://google.com/';
  hashtable['AKOLA IRD'] = 'http://yahoo.com/';
  hashtable['AURANGABAD LPG PLANT'] = 'http://yahoo.com/';
  hashtable['WADALA I  TERMINAL'] = 'http://yahoo.com/';
  hashtable['AJMER LPG PLANT'] = 'http://yahoo.com/';
  hashtable['AJMER TERMINAL'] = 'http://yahoo.com/';
  hashtable['AWA-SALAWAS PIPELINE PROJ'] = 'http://yahoo.com/';
  hashtable['AHMEDABAD NWZ LPG'] = 'http://yahoo.com/';
  hashtable['AHMEDABAD NWZ RETAIL'] = 'http://yahoo.com/';
  hashtable['AHMEDABAD RETAIL RO'] = 'http://yahoo.com/';
  hashtable['BAKANIA RIL'] = 'http://google.com/';
  hashtable['BHOPAL DSRO'] = 'http://google.com/';
  hashtable['BHOPAL RRO'] = 'http://google.com/';

  var locations = {
    'Goa': ['GOA ASF', 'Goa LPG Plant'],
    'Maharashtra': ['AKOLA IRD', 'AURANGABAD LPG PLANT', 'WADALA I  TERMINAL'],
    'Rajasthan': ['AJMER LPG PLANT', 'AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'],
    'Gujrat': ['AHMEDABAD NWZ LPG', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'],
    'MadhyaPradesh': ['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO']

  }

  var $locations = $('#location');
  $('#country').change(function() {
    var country = $(this).val(),
      lcns = locations[country] || [];

    var html = $.map(lcns, function(lcn) {
      return '<option value="' + hashtable[lcn] + '">' + lcn + '</option>'
    }).join('');
    $locations.html(html)
  });
});

HTML Code:

<label class="page1">SELECT A STATE:</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
  <select id="country" name="country" placeholder="Phantasyland">
    <option></option>
    <option>Goa</option>
    <option>Maharashtra</option>
    <option>Rajasthan</option>
    <option>Gujrat</option>
    <option>MadhyaPradesh</option>
  </select>
</div>
<br />
<br />
<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
  <select id="location" name="location" placeholder="Anycity"></select>
</div>

Complete HTML file:

<HTML>
  <HEAD>
    <TITLE>STATES</TITLE>
    <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      jQuery(function($) {

      // bind change event to select
      $('#location').on('change', function() {
      var url = $(this).val(); // get selected value
      if (url) { // require a URL
        window.location = url; // redirect
      }
      return false;
      });

      var hashtable = {};
      hashtable['GOA ASF'] = 'https://stackoverflow.com/';
      hashtable['Goa LPG Plant'] = 'http://google.com/';
      hashtable['AKOLA IRD'] = 'http://yahoo.com/';
      hashtable['AURANGABAD LPG PLANT'] = 'http://yahoo.com/';
      hashtable['WADALA I  TERMINAL'] = 'http://yahoo.com/';
      hashtable['AJMER LPG PLANT'] = 'http://yahoo.com/';
      hashtable['AJMER TERMINAL'] = 'http://yahoo.com/';
      hashtable['AWA-SALAWAS PIPELINE PROJ'] = 'http://yahoo.com/';
      hashtable['AHMEDABAD NWZ LPG'] = 'http://yahoo.com/';
      hashtable['AHMEDABAD NWZ RETAIL'] = 'http://yahoo.com/';
      hashtable['AHMEDABAD RETAIL RO'] = 'http://yahoo.com/';
      hashtable['BAKANIA RIL'] = 'http://google.com/';
      hashtable['BHOPAL DSRO'] = 'http://google.com/';
      hashtable['BHOPAL RRO'] = 'http://google.com/';

      var locations = {
      'Goa': ['GOA ASF', 'Goa LPG Plant'],
      'Maharashtra': ['AKOLA IRD', 'AURANGABAD LPG PLANT', 'WADALA I  TERMINAL'],
      'Rajasthan': ['AJMER LPG PLANT', 'AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'],
      'Gujrat': ['AHMEDABAD NWZ LPG', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'],
      'MadhyaPradesh': ['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO']

      }

      var $locations = $('#location');
      $('#country').change(function() {
      var country = $(this).val(),
        lcns = locations[country] || [];

      var html = $.map(lcns, function(lcn) {
        return '<option value="' + hashtable[lcn] + '">' + lcn + '</option>'
      }).join('');
      $locations.html(html)
      });
      });

    </script>
  </HEAD>
  <BODY>
    <label class="page1">SELECT A STATE:</label>
    <div class="tooltips" title="">
      <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Goa</option>
        <option>Maharashtra</option>
        <option>Rajasthan</option>
        <option>Gujrat</option>
        <option>MadhyaPradesh</option>
      </select>
    </div>
    <br />
    <br />
    <label class="page1">Location</label>
    <div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
      <select id="location" name="location" placeholder="Anycity"></select>
    </div>
  </BODY>
</HTML>

Please refer the below solutions using jQuery.

How to populate a cascading Dropdown with JQuery

Demo fiddle here

Community
  • 1
  • 1
Gauthaman Sahadevan
  • 923
  • 1
  • 11
  • 19
  • http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery this shows how to connect the two dropdown list. which ive already done. i just want the 2nd connected dropdown list to open html pages. will your codes do that? – Neha Shetty Jul 01 '16 at 07:01
  • please check ive already linked the locations and the states dropdown list.and it already works well. my problem is, the ddl2 should open html pages when submit button is clicked. – Neha Shetty Jul 01 '16 at 07:03
  • @NehaShetty - please check the code now. let me know if it works. – Gauthaman Sahadevan Jul 01 '16 at 07:09
  • sir i tried your code. it is not showing the options in the 2nd dropdown list. – Neha Shetty Jul 01 '16 at 07:25
  • 1
    The code is working fine @NehaShetty. please check the [fiddle](http://jsfiddle.net/gaus06techian/cyw4usw5/) link. I went through your previous questions as well. I would suggest you to structure your items using a proper key value pair (may be use a JSON file). – Gauthaman Sahadevan Jul 01 '16 at 07:33
  • sir i am unable to open your fiddle! the page is not opening – Neha Shetty Jul 01 '16 at 09:32
  • https://jsfiddle.net/nehashetty/vuko5urk/ pls check my codes here and tell me why is it not working. also there is no code for the submit button sir – Neha Shetty Jul 01 '16 at 09:38
  • @NehaShetty - did you try with the complete html file I have pasted in the answer. When you select an option from the second drop down - it will automatically redirect to the link provided against it. No submit required, however you can create a button if required. Try forking [fiddle](https://jsfiddle.net/gaus06techian/cyw4usw5/) link and it will work for sure. – Gauthaman Sahadevan Jul 01 '16 at 09:58
  • thankyouso much sir! it is working perfectly like i want. can you please tell me if i want the page to open after cliking the submit button what changes should i make? – Neha Shetty Jul 01 '16 at 10:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116179/discussion-between-gautham-and-neha-shetty). – Gauthaman Sahadevan Jul 01 '16 at 10:22
0

You have a few problems in your code:

  1. Syntax error on 'Maharashtra' array;
  2. You need to wrap your dynamic select (ddl2) with a form.
  3. Edit the value of ddl2 to contain a link instead of string.
  4. Like the answer above, mixed jquery and js.

I edited your code to contain the form and added a link for example in line 12 ('Goa' option)

<HTML>
<HEAD>
    <TITLE> STATES</TITLE>
    <script type="text/javascript">
        function configureDropDownLists(ddl1, ddl2) {
            var goa = ['GOA ASF', 'Goa LPG Plant'];
            var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT', 'WADALA I  TERMINAL'];
            var rajasthan = ['AJMER LPG PLANT ', 'AJMER TERMINAL', 'AWA-SALAWAS PIPELINE PROJ'];
            var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL', 'AHMEDABAD RETAIL RO'];
            var madhyapradesh = ['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];
            var linkExample = 'http://google.com/';

            switch (ddl1.value) {
                case 'Goa':
                    ddl2.options.length = 0;
                    for (i = 0; i < goa.length; i++) {
                        createOption(ddl2, goa[i], linkExample);
                    }
                    break;
                case 'Maharashtra':
                    ddl2.options.length = 0;
                    for (i = 0; i < maharashtra.length; i++) {
                        createOption(ddl2, maharashtra[i], maharashtra[i]);
                    }
                    break;
                case 'Rajasthan':
                    ddl2.options.length = 0;
                    for (i = 0; i < rajasthan.length; i++) {
                        createOption(ddl2, rajasthan[i], rajasthan[i]);
                    }
                    break;
                case 'Gujrat':
                    ddl2.options.length = 0;
                    for (i = 0; i < gujrat.length; i++) {
                        createOption(ddl2, gujrat[i], gujrat[i]);
                    }
                    break;
                case 'MadhyaPradesh':
                    ddl2.options.length = 0;
                    for (i = 0; i < madhyapradesh.length; i++) {
                        createOption(ddl2, madhyapradesh[i], madhyapradesh[i])
                    }
                    break;
                default:
                    ddl2.options.length = 0;
                    break;
            }

            ddl2.setAttribute('multiple', 'multiple');
            ddl2.setAttribute('size', 1);
        }

        function createOption(ddl, text, value) {
            var opt = document.createElement('option');
            opt.value = value;
            opt.text = text;
            ddl.options.add(opt);
        }
    </script>
</HEAD>

<BODY>
<div>
    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>

    <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
        <option value=""></option>
        <option value="Goa">Goa</option>
        <option value="Maharashtra">Maharashtra</option>
        <option value="Rajasthan">Rajasthan</option>
        <option value="Gujrat">Gujrat</option>
        <option value="MadhyaPradesh">MadhyaPradesh</option>
    </select>

    <form id="link1">
        <select id="ddl2" multiple='multiple'>
        </select><br>
        <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
    </form>
</div>
<div>
    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An ASSET:</H1>

    <form id="link">
        <select multiple="multiple" size="1">

            <option value="http://stackoverflow.com/">4GB RAM PC- Lot 500 HCL</option>
            <option value="http://google.com/">4GB RAM PC- Lot 450 HCL</option>
            <option value="http://yahoo.com/">HD 245 Gold Lot 50</option>
            <option value="http://bing.com/">Marathon 255 (40)</option>
            <option value="http://php.net/">Wep HQ 2100 (20)</option>
            <option value="ADF Scanner (45)">ADF Scanner (45)</option>
        </select><BR>

        <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; ">
    </form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    $('#link1').on('submit', function (e) {
        var link = $('#ddl2').val();
        window.open(link);
    });


    $('#link').on('submit', function (e) {
        e.preventDefault();
        var $form = $(this),
                $select = $form.find('select'),
                links = $select.val();
        if (links.length > 0) {
            for (i in links) {
                link = links[i];
                window.open(link);
            }
        }
    });
</script>

</BODY>
</HTML>
Moran Green
  • 32
  • 3
  • hello sir! i have a doubt when will this be opened? var linkExample = 'http://google.com/'; . i dont see goa asf or other locations llinked to any page.? how will clicking on them open any page sir? – Neha Shetty Jul 01 '16 at 07:17
  • I've putted the linkExample in this part: **case 'Goa': ddl2.options.length = 0; for (i = 0; i < goa.length; i++) { createOption(ddl2, goa[i], linkExample); } break;** select Goa on the first dropdown. then select GOA ASF on the second dropdown. then click submit. it will redirect you to www.google.com. of course you need to edit the url to the url that you want :) – Moran Green Jul 01 '16 at 07:46
  • https://jsfiddle.net/nehashetty/8ft8zgqb/ sir please check the code in fiddle and also run it.it shifts the ddl2 dropdown down and does the not show the options in it.also pls tell me the corrections – Neha Shetty Jul 01 '16 at 09:12
  • and also in this way all the options of goa eg goa asf,goa lgp ro all will open the same page linked to goa – Neha Shetty Jul 01 '16 at 09:28