Как изменять ссылку в кнопке при выборе select?

186
26 сентября 2019, 05:10

Есть форма с селекторами

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

Answer 1

$("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>

Answer 2

$('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>

READ ALSO
Разработка android программ на web языках

Разработка android программ на web языках

Вопрос пожалуй даже слишком тривиален, но в интернете ясного ответа я не нашелТак вот собственно и вопрос: Можно ли писать программы под андроид...

156
API VK account.lookupContacts Access denied [закрыт]

API VK account.lookupContacts Access denied [закрыт]

не могу получить информацию по запросу VK API

173
имитировать клик submit

имитировать клик submit

подскажите, что-то туплю, как при клике на кнопки +- имитировать кнопку submit&

196
Объясните порядок вычисления

Объясните порядок вычисления

Вывожу в консоль такой код -сonsolelog(++g + fun(g));

174