Как связать кнопку отправки с OPTION LIST, созданным в HTML, используя JavaScript
Я занимаюсь разработкой веб-страницы с зависимым раскрывающимся списком. Первый список содержит 5 штатов, а второй — города в этих штатах. Я использовал приведенный ниже скрипт для связи двух выпадающих списков.
могу ли я связать кнопку отправки таким образом со вторым зависимым раскрывающимся списком, чтобы при выборе одной опции в списке и нажатии кнопки отправки открывалась другая страница, тогда как при выборе другой опции и нажатии кнопки отправки это должно открыть какую-то другую страницу.
По сути, я хочу, чтобы каждая опция открывала какую-либо связанную страницу при нажатии кнопки «Отправить».
При поиске я понял, что для этого мне нужно использовать php / javaquery, но я не получаю соответствующий код для него.
Я не хочу, чтобы кнопка отправки открывала только 1 конкретную страницу. Скорее, я хочу открыть 6 разных страниц, соответствующих различным выбранным параметрам.
Если да, то какие коды я должен использовать, потому что второй список не находится в (выберите тег), он создан с использованием 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 Asf) и нажимаю на кнопку submit, она открывает страницу «http:», тогда как, когда я выбираю другую опцию, она выбирает другую страницу.
я знаю, как связать обычный выпадающий список, разработанный в html, с кнопкой submit. bt я не знаю, как связать список, созданный javascript, с кнопкой submit.
Пожалуйста, помогите мне с кодами и скажите, как я могу это сделать.
это код, который я использовал для связывания обычного выпадающего списка с помощью кнопки выбора. это я использовал для какой-то другой веб-страницы.
я хочу сделать это с теми же кодами выше
<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);
}
}
});
пожалуйста, скажи мне коды, если ты знаешь.
Решение
Так вы получите значение выбранного параметра. Я показал для первого выпадающего списка, но если вы хотите, вы можете получить значение второго аналогично. Затем либо вы можете создать массив, либо сделать оператор переключателя для отправки формы на разные страницы.
<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();
});
});
Надеюсь это поможет…
Другие решения
Других решений пока нет …