@evkonev23

Как настроить вывод в ссылку из зависимых списков с использованием кнопки?

Добрый день.
Ситуация следующая, были созданы два списка и установлена связь между первым и вторым последовательно
изначально планировалось сделать оба списка 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>
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы