php - 将动态 DDL 与 HTML 中的 SUBMIT BUTTON 链接

Question

我创建了一个 DYNAMIC DROPDOWNLIST DDL2，它通过脚本标记链接到 DDL1。我希望 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://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>

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

  <!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.stackoverflow.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>

score 2 · Accepted Answer

好的，首先在您的函数 configureDropDownLists 中，您需要为每个变量添加一个值“选择”，例如。

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

该语句的作用是默认情况下，您的 ddl2 中的值将设置为“选择”

其次，将您的 ddl2 选择标签替换为

<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' 是匹配发生的索引。希望这可以帮助你

score 0 · Accepted Answer

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

php - 将动态 DDL 与 HTML 中的 SUBMIT BUTTON 链接

2 回答 2

Related

Reference