How to set output to a link from dependent lists using a button?

E

evkonev232019-03-12 01:17:10

Bootstrap

evkonev23, 2019-03-12 01:17:10

Good afternoon.
The situation is as follows, two lists were created and a connection was established between the first and second,
it was originally planned to make both lists class = "selectpicker", but unfortunately I could not find the necessary information on combining two lists made using the bootstrap style of the selectpicker class.
In general, the view in which everything works now suits, except for one, I would like to make a working button similar to this example

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Кнопка-ссылка</button>
</form>

That is, to put it simply, when the button is pressed, the value from the first list and the value from the second list should form a continuation of the site domain url link:
site.com -> site.com/select1-select2
I understand that in my section there is no correct variable name for the second list, it was would be grateful for help with this

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