2016-07-01 70 views
1

我是初学者!而且我很多天以来一直在困扰着这个问题。我非常需要帮助!这个问题可能有点难以理解。请仔细阅读。将HTML中的DROPDOWN列表链接到其他HTML页面

我创建了一个下拉列表DDL1(5个状态的下拉列表)和一个DYNAMIC DROPDOWNLIST DDL2(它由每个状态中的位置组成)。 DDL1链接到DDL2的方式是ddl2的值在ddl1中选择状态时发生变化。 FOR例如:当u在DDL1选择GOA你看到在DDL2果阿的位置 (你可以看到下面联的代码)

我想要的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中运行它,你将确切地知道我创建了什么以及我想链接的内容。
请运行它,并帮助我的代码和它的结构,如果你能。 Thankyou

+0

有时候这是非常好的张贴在jsfiddle.net你的代码,并提供额外的链接,例如这里的链接 –

回答

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

+0

http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery这显示了如何连接两个下拉列表。这已经完成了。我只想第二个连接的下拉列表打开html页面。你的代码会这样做吗? –

+0

请检查ive已经链接的位置和状态下拉列表,它已经运行良好。我的问题是,点击提交按钮时,ddl2应打开html页面。 –

+0

@NehaShetty - 请立即检查代码。让我知道它是否有效。 –

0

你在你的代码的一些问题:

    上 '马哈拉施特拉邦' 阵列
  1. 语法错误;
  2. 你需要用你的动态选择(ddl2)包装一个表格。
  3. 编辑ddl2的值以包含链接而不是字符串。
  4. 像上面的答案,混合jquery和js。

我编辑你的代码包含的形式和线12(“果阿”选项)

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

你好,先生!我怀疑这会被打开吗? var linkExample ='http://google.com/'; 。我没有看到goa asf或其他位置链接到任何页面。?如何点击它们打开任何页面先生? –

+0

我把linkExample放在这个部分: ** case'Goa': ddl2.options.length = 0; (i = 0; i

+0

https://jsfiddle.net/nehashetty/8ft8zgqb/先生请检查小提琴中的代码,也运行it.it将ddl2下拉下来,然后做不显示它的选项。还请告诉我更正 –