Добрый день.
Ситуация следующая, были созданы два списка и установлена связь между первым и вторым последовательно
изначально планировалось сделать оба списка class="selectpicker", но я не смог к сожалению найти необходимую информацию по объединению двух списков сделанных при помощи стиля bootstrap класса selectpicker.
В целом вид в котором работает все сейчас устраивает, кроме одного, хотелось бы сделать рабочей кнопку по схожему с этим примеру
<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>
То есть упрощенно говоря при нажатии кнопки значение из первого списка и значение из второго списка должны формировать продолжение ссылки url домена сайта:
site.com -> site.com/select1-select2
Понимаю что в моем разделе нет корректного названия переменных для второго списка, был бы признателен за помощь и в этом
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<script>
var um = Array('Прибытие')
var msk = Array('Луганск','Краснодон','Стаханов','Алчевск','Брянка','Донецк');
var kv = Array('Луганск');
var lug = Array('Санкт-Петербург','Москва');
function showNames(v){
var mas = eval(v);
var el = document.getElementById('names');
while(el.childNodes.length>0){
el.removeChild(el.childNodes[el.childNodes.length-1]);
}
for(var i=0;i<mas.length;i++){
var opt = document.createElement("option");
opt.innerHTML=mas[i];
el.appendChild(opt);
}
}
</script>
</head>
<body onload="showNames('um')">
<div class="container">
<style type="text/css">
H4 {
font: 1em Arial, Avenir, sans-serif; /* Параметры шрифта */
color: #BAA21E; background: #fff;
padding: 0 1px;
}
H4 SPAN {
position: static; /* Относительное позиционирование */
}
#maket {
width: 100%; /* Ширина всей таблицы */
}
TD {
vertical-align: top; /* Вертикальное выравнивание в ячейках */
padding: 20px; /* Поля вокруг ячеек */
}
TD {
horizontal-align: top; /* Вертикальное выравнивание в ячейках */
padding: 20px; /* Поля вокруг ячеек */
}
TD#leftcol {
width: 50%; /* Ширина левой колонки */
background: #fff; /* Цвет фона левой колонки */
}
TD#rightcol {
width: 50%; /* Ширина левой колонки */
background: #fff; /* Цвет фона левой колонки */
}
</style>
<table cellspacing="0" id="maket">
<tr>
<td id="leftcol">
<th>
<select class="selectpicker" data-style="btn-default" data-live-search="true" id="level" onchange="showNames(this.value)">
<option value="um">Город отправления</option>
<optgroup value="spb"label="Россия">
<option value="msk">Москва</option>
</optgroup>
<optgroup label="Украина">
<option value="kv">Киев</option>
<option value="lug">Луганск</option>
</optgroup>
</select>
<p></p>
<select class="form-control" data-style="btn-default" data-live-search="true" id="names">
<option>Город прибытия</option>
</select>
</th>
</td>
<td id="rightcol">
<button type="button" class="btn btn-warning"><font style="vertical-align: inherit;"><font style="horizontal-align: inherit;">Поиск</font></font></button>
</td>
</tr>
</table>
</div>
</body>
</html>