2016-07-01 68 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下拉下來,然後做不顯示它的選項。還請告訴我更正 –