Есть форма с селекторами
<form >
<div class="form-row">
<div class="col-md-4">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option>Марка</option>
<option>Audi</option>
<option>BMW</option>
<option>Chery</option>
</select>
</div>
<div class="col-md-4">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option>Модель</option>
<option>Первая модель</option>
<option>Вторая модель</option>
<option>Третья модель</option>
</select>
</div>
<div class="col-md-4">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option>Поколение</option>
<option>1990</option>
<option>2005</option>
<option>2019</option>
</select>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-danger">Перейти</button>
</div>
</div>
Как сделать так, что бы при выборе select в кнопку подставлялась определенная ссылка для перехода на страницу, которая будет формироваться основываясь на значении выбранных пунктов в select?
$("button").on('click', function() {
var mark = $("#mark option:selected").val();
var model = $("#model option:selected").val();
var age = $("#age option:selected").val();
if(mark != 'Марка' && model != 'Модель' && age != 'Поколение') {
// location.href = "http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age;
// или вариант в новом окне
window.open("http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age);
console.log("http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age);
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mark">
<option>Марка</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chery">Chery</option>
</select>
<select id="model">
<option>Модель</option>
<option value="Первая модель">Первая модель</option>
<option value="Вторая модель">Вторая модель</option>
<option value="Третья модель">Третья модель</option>
</select>
<select id="age">
<option>Поколение</option>
<option value="1990">1990</option>
<option value="2005">2005</option>
<option value="2019">2019</option>
</select>
<button>Перейти</button>
$('form button[type="submit"]').click(function() {
var params = {};
$('form select[data-type]').each(function(index, element) {
var select = $(this);
params[select.data('type')] = select.val();
});
var url = $.param(params);
alert(url);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form >
<div class="form-row">
<div class="col-md-4">
<select class="selectpicker" data-type="mark" data-show-subtext="true" data-live-search="true">
<option>Марка</option>
<option>Audi</option>
<option>BMW</option>
<option>Chery</option>
</select>
</div>
<div class="col-md-4">
<select class="selectpicker" data-type="model" data-show-subtext="true" data-live-search="true">
<option>Модель</option>
<option>Первая модель</option>
<option>Вторая модель</option>
<option>Третья модель</option>
</select>
</div>
<div class="col-md-4">
<select class="selectpicker" data-type="age" data-show-subtext="true" data-live-search="true">
<option>Поколение</option>
<option>1990</option>
<option>2005</option>
<option>2019</option>
</select>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-danger">Перейти</button>
</div>
</div>
</form>
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости