2016-07-01 1 views
1

Я новичок! и я застрял на этом вопросе с многих дней. и мне нужна помощь для этого плохо! Этот вопрос может быть немного трудно понять. Пожалуйста, внимательно прочитайте.Ссылка на список DROPDOWN в HTML с другими HTML-страницами

Я создал выпадающий список DDL1 (выпадающий список из 5 состояний) и DYNAMIC DROPDOWNLIST DDL2 (который состоит из местоположений в каждом состоянии). DDL1 связан с DDL2 таким образом, что значения ddl2 изменяются при выборе состояния в ddl1. FOR, например: когда и выберите ГОА в ddl1 у см расположение гоа в ddl2 (вы можете увидеть КОДЫ НИЖЕ увязывания)

я хочу варианты ddl2 т.е. (местоположения) при выборе и кнопку отправки нажата, чтобы открыть некоторые связанные с ними html-страницы.

ниже, что у меня также есть еще один раскрывающийся список, который ive успешно связан, потому что это не динамически связанный выпадающий список. И это было легко, потому что это в теге select. тогда как ddl2 находится в теге скрипта, поскольку он динамически связан с ddl1.

Может кто-нибудь, пожалуйста, скажите мне код для связывания ddl2 (i.e 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

IMHO не смешивать 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 показывает, как подключить два выпадающего списка. которые уже выполнены. я просто хочу, чтобы 2-й связанный выпадающий список открыл html-страницы. будут ли ваши коды делать это? –

+0

, пожалуйста, проверьте, что ive уже связал местоположения и выпадающий список состояний. И он уже работает хорошо. моя проблема в том, что ddl2 должен открыть html-страницы при нажатии кнопки отправки. –

+0

@NehaShetty - проверьте код сейчас. сообщите мне, если это сработает. –

0

У вас есть несколько проблем в вашем коде:

  1. Синтаксическая ошибка в массиве 'Махараштры';
  2. Вам необходимо обернуть свой динамический выбор (ddl2) формой.
  3. Отредактируйте значение ddl2, чтобы содержать ссылку вместо строки.
  4. Как и ответ выше, смешанный jquery и js.

Я редактировал свой код, чтобы содержать в себе форму и добавил ссылку, например, в строке 12 (опция «Goa»)

<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

Я положил ссылкуExample в этой части: ** case 'Goa': ddl2.options.length = 0; для (i = 0; i

+0

https://jsfiddle.net/nehashetty/8ft8zgqb/ сэр, пожалуйста, проверьте код в скрипке, а также запустите it.it, сдвинув выпадающий список ddl2 и сделайте не показывать параметры в нем. Также PLS скажите мне поправки –

Смежные вопросы