将HTML中的DROPDOWN列表与其他HTML页面链接

时间：2016-07-01 06:13:19

标签： javascript php html

我是初学者！多天以来，我一直坚持这个问题。我非常需要帮助！这个问题可能有点难以理解。请仔细阅读。

我创建了一个下拉列表DDL1（5个状态的下拉列表）和一个DYNAMIC DROPDOWNLIST DDL2（由每个州的位置组成）。 DDL1链接到DDL2，使得ddl2的值在ddl1中选择状态时发生变化。 例如：当你在ddl1中选择GOA时，你会看到ddl2中goa的位置 （您可以查看链接下面的代码）

我想要ddl2的选项，即选中时的位置，按下提交按钮打开一些与它们相关的html页面。

下面我还有一个下拉列表已成功链接，因为它不是动态链接的下拉列表。链接很容易，因为它在select标签中。而ddl2在脚本标记中，因为它动态链接到ddl1。

有人可以告诉我将ddl2（即goa asf，goa lpg ro等）链接到其他html页面的代码吗？

我的页面代码如下所示：

   <!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>

上面给出的代码是我的整页代码。 如果您在html中运行它，您将确切知道我创建了什么以及我想要链接的内容。
如果可以的话，请运行它并帮助我编写代码及其结构。 三江源

2 个答案:

答案 0 :(得分：1)

恕我直言，不要混合使用javascript和jQuery。您已经导入了jQuery库，因此可以充分利用它来实现级联效果。

jQuery代码：

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代码：

<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>

完整的HTML文件：

<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>

请使用jQuery参考以下解决方案。

How to populate a cascading Dropdown with JQuery

在此演示fiddle

答案 1 :(得分：0)

您的代码中存在一些问题：

  1. ＆＃39; Maharashtra＆＃39;上的语法错误阵列;
  2. 您需要使用表单包装动态选择（ddl2）。
  3. 编辑ddl2的值以包含链接而不是字符串。
  4. 像上面的答案一样，混合了jquery和js。

    5. 我修改了您的代码以包含表单并添加了一个链接，例如第12行（＆＃39; Goa＆＃39;选项）

    <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>
相关问题
最新问题