Javascript 将HTML中的下拉列表与其他HTML页面链接_Javascript_Php_Html

Javascript 将HTML中的下拉列表与其他HTML页面链接

javascript php html

Javascript 将HTML中的下拉列表与其他HTML页面链接,javascript,php,html,Javascript,Php,Html,我是初学者！很多天以来，我一直被这个问题困扰着。我非常需要帮助！这个问题可能有点难理解，请仔细阅读我创建了一个下拉列表DDL1（一个包含5个州的下拉列表）和一个动态下拉列表DDL2（由每个州的位置组成）。 DDL1链接到DDL2的方式使DDL2的值在DDL1中选择状态时发生变化。例如：当您在ddl1中选择GOA时，您可以在ddl2中看到GOA的位置（您可以看到下面的链接代码）我想要ddl2的选项，即（位置）被选中时，按下submit按钮打开一些与之相关的html页面下面我还有一个下拉列

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

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

我想要ddl2的选项，即（位置）被选中时，按下submit按钮打开一些与之相关的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>


州
功能配置下拉列表（ddl1、ddl2）{
var goa=['goa ASF'，'goa LPG工厂']；
var马哈拉施特拉邦=[“阿科拉IRD”，“奥兰加巴德液化石油气厂”，“瓦达拉一号码头]；
var rajasthan=[“AJMER液化石油气工厂”、“AJMER终端”、“AWA-SALAWAS管道项目]；
var gujrat=['AHMEDABAD NWZ LPG'、'AHMEDABAD NWZ RETAIL'、'AHMEDABAD RETAIL RO']；
中央邦变量=['BAKANIA RIL'，'BHOPAL DSRO'，'BHOPAL RRO']；
开关（ddl1.value）{
“果阿”案：
ddl2.options.length=0；
对于（i=0；i


选择一项资产：
4GB RAM PC-批次500盐酸
4GB RAM PC-批次450盐酸
HD 245黄金地段50
马拉松255（40）
Wep总部2100（20）
ADF扫描仪（45）




$（'#link'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var$form=$（此），
$select=$form.find（'select'），
links=$select.val（）；
如果（links.length>0）{
用于（链接中的i）{
链接=链接[i]；
窗口。打开（链接）；
}
}
});

上面给出的代码是我的整页代码。 如果您以html格式运行它，您将确切知道我创建了什么以及我要链接什么。
请运行它，并帮助我的代码和它的结构，如果你可以。

谢谢你，我不会把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)
  });
});

jQuery（函数（$）{
//绑定要选择的更改事件
$（'#location'）。在（'change'，function（）上{
var url=$（this）.val（）；//获取所选值
if（url）{//需要一个url
window.location=url；//重定向
}
返回false；
});
var hashtable={}；
哈希表['GOA ASF']='https://stackoverflow.com/';
哈希表['Goa LPG工厂]='http://google.com/';
哈希表['AKOLA IRD']='http://yahoo.com/';
哈希表['AURANGABAD液化石油气厂]='http://yahoo.com/';
哈希表['WADALA I终端']='http://yahoo.com/';
哈希表['AJMER液化石油气工厂]='http://yahoo.com/';
哈希表['AJMER TERMINAL']='http://yahoo.com/';
哈希表['AWA-SALAWAS管道项目]='http://yahoo.com/';
哈希表['AHMEDABAD NWZ LPG']='http://yahoo.com/';
哈希表['AHMEDABAD NWZ RETAIL']='http://yahoo.com/';
哈希表['AHMEDABAD RETAIL RO']='http://yahoo.com/';
哈希表['BAKANIA RIL']='http://google.com/';
哈希表['BHOPAL DSRO']='http://google.com/';
哈希表['BHOPAL erro']='http://google.com/';
变量位置={
“果阿”：[“果阿ASF”，“果阿液化石油气厂”]，
“马哈拉施特拉邦”：[“阿科拉IRD”、“奥兰加巴德液化石油气厂”、“瓦达拉一号码头”]，
“拉贾斯坦邦”：[“AJMER液化石油气厂”、“AJMER码头”、“AWA-SALAWAS管道项目”]，
‘古吉拉特’：[‘艾哈迈达巴德NWZ液化石油气’、‘艾哈迈达巴德NWZ零售’、‘艾哈迈达巴德零售RO’，
“中央邦”：[“巴卡尼亚-里尔”、“博帕尔-德斯罗”、“博帕尔-罗”]
}
变量$locations=$（“#location”）；
$（'#country'）。更改（函数（）{
var country=$（this.val（），
lcns=地点[国家]| |[]；
var html=$.map（lcn，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
$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（函数（$）{
//绑定要选择的更改事件
$（'#location'）。在（'change'，function（）上{
var url=$（t
<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>