0

最初のリストには 5 つの州が含まれ、2 番目のリストにはその州内の都市が含まれています。以下に示すスクリプトを使用して、2 つのドロップダウン リストをリンクしています。リストで 1 つのオプションを選択して送信ボタンをクリックすると、別のページが開き、別のオプションを選択して送信ボタンをクリックすると、2 番目の従属ドロップダウン リストに送信ボタンをリンクできますか?他のページを開く必要があります。基本的に、送信ボタンがクリックされたときに、各オプションでリンクされたページを開く必要があります。検索すると、これには php/javaquery を使用する必要があることがわかりましたが、適切なコードが得られません。

送信ボタンで特定の 1 ページだけを開きたくありません。むしろ、選択したさまざまなオプションに対応する6つの異なるページを開く必要があります。

はいの場合、2番目のリストが（選択タグ）にないため、どのコードを使用する必要がありますか。以下に示すjavascriptを使用して作成されました。

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

これが私のデザインコードです！最初のドロップダウン リストで goa を選択すると、書かれたコードによって 2 番目の依存ドロップダウン リスト (例: Goa Asf) に goa の場所が表示されます。しかし、私がやりたいのは、オプション（例：Goa Asf）をクリックしてsubmitbuttonをクリックすると、ページ「http：」が開きますが、他のオプションを選択すると別のページがオプションになります。

HTMLで設計された通常のドロップダウンリストを送信ボタンにリンクする方法を知っています.bt javascriptで作成されたリストを送信ボタンに接続する方法がわかりません。コードで私を助けて、私がそれを行う方法を教えてください。これは、通常のドロップダウン リストとオプション ボタンをリンクするために使用したコードです。これは他のウェブページに使用されています。上記の同じコードでこれを行いたい

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

知っていたらコードを教えてください。

4

1 に答える 1

1

これは、選択したオプションの値を取得する方法です。最初のドロップダウンについて示しましたが、必要に応じて、2 番目のドロップダウンの値も同様に取得できます。次に、配列を作成するか、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();

        });

    });

お役に立てれば...

于 2016-06-28T14:33:09.517 に答える