【问题标题】:Linking DROPDOWN list in HTML with other HTML pages将 HTML 中的 DROPDOWN 列表与其他 HTML 页面链接
【发布时间】:2016-07-01 15:38:28
【问题描述】:

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

我创建了一个下拉列表 DDL1(包含 5 个状态的下拉列表)和一个 DYNAMIC DROPDOWNLIST DDL2(由每个状态中的位置组成)。 DDL1 以这样的方式链接到 DDL2,即 ddl2 的值会在 ddl1 中选择状态时发生变化。 例如:当您在 ddl1 中选择 GOA 时,您会在 ddl2 中看到 goa 的位置 (您可以在链接下方看到代码)

我想要DDL2的选项,即(位置)选择并提交按钮以打开与它们相关的一些HTML页面。

在下面,我还有一个下拉列表,我成功链接了它,因为它不是动态链接的下拉列表。链接很容易,因为它在选择标签中。而 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 中运行它,你会确切地知道我创建了什么以及我想要链接什么。
如果可以的话,请运行它并帮助我处理代码及其结构。 谢谢你

【问题讨论】:

  • 有时将您的代码发布在 jsfiddle.net 上并在此处提供链接非常好

标签: javascript php html


【解决方案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在这里

【讨论】:

  • stackoverflow.com/questions/18351921/… 这显示了如何连接两个下拉列表。我已经完成了。我只希望第二个连接的下拉列表打开 html 页面。你的代码会这样做吗?
  • 请检查我已经链接了位置和状态下拉列表。它已经很好地工作了。我的问题是,点击提交按钮时 ddl2 应该打开 html 页面。
  • @NehaShetty - 请立即检查代码。让我知道它是否有效。
  • 先生,我试过你的代码。它没有显示第二个下拉列表中的选项。
  • 代码运行良好@NehaShetty。请检查fiddle 链接。我也解决了你之前的问题。我建议您使用正确的键值对(可能使用 JSON 文件)来构建您的项目。
【解决方案2】:

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

  1. “Maharashtra”数组存在语法错误;
  2. 您需要使用表单包装动态选择 (ddl2)。
  3. 编辑 ddl2 的值以包含链接而不是字符串。
  4. 和上面的答案一样,混合 jquery 和 js。

我编辑了您的代码以包含表单并添加了一个链接,例如在第 12 行('Goa' 选项)

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

【讨论】:

  • 您好,先生!我有疑问什么时候会打开? var linkExample = 'google.com'; .我没有看到链接到任何页面的 goa asf 或其他位置。?先生,点击它们将如何打开任何页面?
  • 我已经把linkExample放在这部分:case 'Goa': ddl2.options.length = 0; for (i = 0; i 在第一个下拉菜单中选择 Goa。然后在第二个下拉列表中选择 GOA ASF。然后点击提交。它会将您重定向到 www.google.com。当然,您需要将网址编辑为您想要的网址:)
  • jsfiddle.net/nehashetty/8ft8zgqb 先生,请检查小提琴中的代码并运行它。它会将 ddl2 下拉列表向下移动并且不显示其中的选项。还请告诉我更正
  • 这样goa的所有选项例如goa asf,goa lgp ro都将打开链接到goa的同一个页面
猜你喜欢
  • 2014-01-20
  • 2016-07-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-21
  • 1970-01-01
  • 2016-08-07
  • 2018-07-11
相关资源
最近更新 更多