如何 link 使用 javascript 在 html 中创建的选项列表提交按钮

Question

我正在开发一个网页，其中有一个从属下拉列表 list.in，第一个列表包含 5 个州，第二个列表包含其中的城市 states.i 已使用下面显示的脚本 link 两个下拉列表。我可以 link 提交按钮到第二个相关下拉列表，当列表中的一个选项被 select 编辑并单击提交按钮时，它应该打开另一个页面，而当另一个选项是 selected 并单击提交按钮，它应该会打开其他页面。基本上我希望每个选项在单击提交按钮时打开一些 linked 页面。通过搜索，我了解到我必须为此使用 php/javaquery 但我没有获得相应的代码。

我不希望提交按钮只打开 1 个特定页面。相反，我希望它打开 6 个不同的页面，对应于不同的选项 selected.

如果是，我应该使用什么代码，因为第二个列表不在其使用 javascript 创建的（select 标记中），如下所示：

 <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','UDAIPUR RRO'];
 var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL','VADODARA IRD '];
 var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];//this is my dependent list. i want these options to have links.

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>

 <br>
 <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>

这是我的设计代码！当我 select 在第一个下拉列表中的果阿上时，我通过我编写的代码在第二个相关下拉列表中获得果阿的位置（例如：Goa Asf）。但我想要它做的是当我点击一个选项（例如：Goa Asf）并点击提交按钮时它将打开一个页面 "http:" 而当我 select 其他选项时它将选择另一个页面。

我知道如何 link 使用提交 html 设计的普通下拉列表 button.bt 我不知道如何将 javascript 创建的列表与提交按钮。请帮我处理代码并告诉我该怎么做。这是我用于 link 带选项按钮的普通下拉列表的代码。这我用于其他一些网页。我想用上面相同的代码来做这个

       <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);
        }
    }
});

如果你知道请告诉我代码。

Answer 1

这就是您获取所选选项值的方式。我已经展示了第一个下拉列表，但如果你愿意，你可以类似地获得第二个下拉列表的值。然后你可以创建一个数组或创建一个 switch case 语句来将表单提交到不同的页面。

<div>
    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>
    <form name="myForm" id="myForm" action="">
         <select id="ddl" name="dd1" 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" name="dd12">
    </select><br>
    <br>
    <!--<input class="SubmitButton" type="submit" name="submit"  id="submit" value="Submit" style="font-size:20px; " />-->
    <button id="submit" name="submit">Submit</button>


    </form>

    </div> 



   <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
   <script>
    $(document).ready(function()
    { 
        $('#submit').on('click', function (e) {
            //e.preventDefault();
            var linkTo = $('select[name="dd1"]' ).val();
            var goTo;
            alert(linkTo);

            switch (linkTo) {
            case 'Goa':
                goTo = "www.google.com";
                break;
            case 'Maharashtra':
                goTo = "www.yahoo.com";
                break;
            }



            $("#myForm").attr("action", goTo);
             alert(goTo);
            $("#myform").submit();

        });

    });

希望这对您有所帮助...

如何 link 使用 javascript 在 html 中创建的选项列表提交按钮

How to link submit button with OPTION LIST created in html using javascript

html

php

list

javaquery