将动态 DDL 与 HTML 中的提交按钮链接

Question

我创建了一个动态下拉列表 DDL2，它通过脚本链接到 DDL1 tag.i 希望 ddl2 的选项在单击并按下提交按钮时打开一些页面。 ddl1 由 5 个状态组成，ddl2 由动态连接的这些状态的位置组成。下面我还有一个 ddl，我已经成功链接，因为它不是动态链接的下拉列表。有人可以告诉我将 ddl2 即 goa asf、goa lpg ro 等列表链接到页面的代码吗？代码如下所示：

   <!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://whosebug.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>

上面给出的代码是我整个页面的代码。我也收到了链接代码，但它不起作用。我不知道为什么。如果你知道，请帮我提供一个代码。或者告诉我我必须在下面给出的代码中做哪些更改才能使其正常工作。

  <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
  <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script type="text/javascript">

    allLinks= {goa:{0:"google.com",1:"www.gmail.com"},
    maharashtra : 
    {0:'www.yahoo.com',1:"www.microsoft.com",2:"www.apple.com"},
    rajasthan :
    {0:'www.whosebug.com',1:'www.cnn.com',2:'www.nasa.gov'}
   }

       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','UDAIPUR RRO'];
        var gujrat = ['AHMEDABAD NWZ LPG ','AHMEDABAD NWZ RETAIL','VADODARA IRD '];
          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],i);
             }
          break;
          case 'maharashtra':
         ddl2.options.length = 0;
         case 'maharashtra':
        ddl2.options.length = 0; 
        for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i],i);
         }
        break;
        case 'rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
        createOption(ddl2, rajasthan[i],i);
         }
        break;
        case 'gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
         createOption(ddl2, gujrat[i],i);
          }
       break;
         case 'madhyapradesh':
         ddl2.options.length = 0;
         for (i = 0; i < madhyapradesh.length; i++) {
         createOption(ddl2, madhyapradesh[i],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);
            }

            $(document).ready(function(){

              $('#link').on('submit', function (e) {
             e.preventDefault();
              alert('submited, opening link');

               var $form = $(this);

               $select1 = $form.find('select#ddl1').val(); //state
               $select2 = $form.find('select#ddl2').val(); //city
                window.open('http://'+allLinks[$select1][$select2]); 
                 });
                    });
                  </script>
                  </head>

    <BODY> 
     <div id='link'>
      <form>
        <select id="ddl1" 
       onchange="configureDropDownLists(this,document.getElemen
       tById('ddl2'))">
     <option value=""></option>
      <option value="goa">Goa</option>
        <option value="maharashtra">Maharashtra</option>
        <option value="rajasthan">Rajasthan</option>
        <select id="ddl2">
       </select><br>
       <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
       </div>
       </body>
        </html>

Answer 1

好的，所以首先在函数 configureDropDownLists 中为每个变量添加一个值 'Select' 例如

var goa = ['Select','GOA ASF', 'Goa LPG Plant'];

此语句的作用是默认将您的 ddl2 中的值设置为 'Select'

其次将您的 ddl2 select 标签替换为

<select id="ddl2" onchange ="openpage()">

现在在这个 'openpage' 函数中创建一个 JSON 对象，它将每个 ddl2 值链接到相应的网页

var newpage = {"list":[
               {"state": "GOA ASF", "page" : "webpagelink"},
               {"state": "GOA LPG PLANT", "page" : "webpagelink"},
               and so on for all the values
              ]};

也在这个函数中执行这个任务

x =document.getElementById("ddl2");
var state =x.options[x.selectedIndex].value;
if( state != 'select')
{
  loop through all the values in the Json pbject and compare them with state, if a match occurs then do the following//
  window.open(newpage.list[i].page);
}

这里'i'是匹配发生的索引。希望这对您有所帮助

Answer 2

   <!DOCTYPE HTML>
   <HTML>
   <HEAD>
   <TITLE> STATES</TITLE>
   <script type="text/javascript">
    function configureDropDownLists(ddl1,ddl2) {
  var goa = ['select',GOA ASF', 'Goa LPG Plant'];
  var maharashtra = ['select','AKOLA IRD', 'AURANGABAD LPG PLANT''WADALA I  TERMINAL'];
 var rajasthan = ['select','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);
     }
   var newpage = {"list":[
           {"state": "GOA ASF", "page" : "webpagelink"},
           {"state": "GOA LPG PLANT", "page" : "webpagelink"},            
          ]};
   x =document.getElementById("ddl2");
  var state =x.options[x.selectedIndex].value;
  if( state != 'select')
   {
      loop through all the values in the Json pbject and compare them                        with state, if a match occurs then do the following//
       window.open(newpage.list[i].page);
    }

    </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" onchange ="openpage()">
       </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://whosebug.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>

将动态 DDL 与 HTML 中的提交按钮链接

linking the Dynamic DDL With SUBMIT BUTTON in HTML

html

php

javaquery