У меня есть 2 выпадающих списка, и мне нужно, чтобы кнопка URL менялась в зависимости от различных комбинаций значений.
т.е.1-й выпадающий: синий, красный, желтый 2-й выпадающий: автомобиль, мяч, дом
Если пользователь выбирает синий и шар, то URL-адрес кнопки меняется на www.blueball.com Если пользователь выбирает синий и дом, то URL-адрес кнопки меняется на www.bluehouse.com....
это самое близкое, что я могу сделать, но вместо отображения текста мне нужно, чтобы он ссылался на разные URL.
(function () {
$(".go-btn").on(
'click',
function (e) {
// within this function you should figure out the url
// to redirect to, depending on the selected values
// the next line only shows the text of selected values
$('#selected').html([$('#select1 option:selected').text(),
$('#select2 option:selected').text()].join('/'));
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="selCont">
<h2>pick an option</h2>
<select id="select1">
<option value="1" selected>West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="select2">
<option value="1" selected>Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
<div id="selected"></div>
рабочий JSfiddle https://jsfiddle.net/td3j5frn/
Вот еще один пример, который я нашел в Интернете и который выглядит правильно, но кнопка неправильно связывается.
function myFunction() {
$('.dropdown-plans').change(function() {
var val = $('#basic_plan').val() + $('#basic_plan2').val();
var linknum = "";
switch (val) {
case "1A" : linknum = "1";
break;
case "1B" : linknum = "4";
break;
}
$('#abc').attr("href","www.link" + linknum + ".com");
});
}
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="dropdown-plans">
<select id="basic_plan2" name="bill_cycle2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>
работает JSfiddle https://jsfiddle.net/errypkpc/1/