Изменить ссылку на кнопку с вводом из двух выпадающих списков?

Question

У меня есть кнопка со ссылкой, которая должна быть изменена в зависимости от того, что пользователь выбирает из двух выпадающих меню.

Я нашел гениальное решение с меню один ниспадающего здесь:

var sel = document.getElementById('basic_plan'); 
 
sel.onchange = function() { 
 
    document.getElementById("abc").href = this.value + ".html"; 
 
}

<div class="dropdown-plans"> 
 
    <select id="basic_plan" name="bill_cycle"> 
 
     <option value="tri">3 Years - Rs. 100/month</option> 
 
     <option value="bi">2 Years - Rs. 200/month</option> 
 
     <option value="ann">1 Year - Rs. 100/month</option> 
 
    </select> 
 
</div> 
 
<div class="button-plans"> 
 
<a id="abc" href="something"> Order now </a> 
 
</div>

http://jsfiddle.net/MHh46/1/

Однако мне нужно решение, в котором выходное звено основывается на двух выпадающих меню. Например:

<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-plans2"> 
 
    <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>

Но как бы часть выглядеть Javascript для того, чтобы это работало?

Например, если вы выбрали вариант «1» из раскрывающегося списка №1 и вариант «А» из раскрывающегося списка №2, ссылка на ссылку на www.link1.com, если вы выберете «2» и «А», она будет ссылаться на www .link2.com, 3A = www.link3.com, 1B = www.link4.com и т. д.

Надеюсь, мой вопрос имеет смысл.

С уважением. :-)

Answer 1

Измените выпадающие списки, чтобы они оба имели один и тот же класс (class = "dropdown-plans"), а затем вы можете привязать событие изменения к обоим. Когда либо выбрано, событие будет вызывать, и объединить значение обоих вариантов, а затем назначить результат на href.

JQuery

$('.dropdown-plans').change(function() { 
    var val = $('#basic_plan').val() + $('#basic_plan2').val(); 
    $('#abc').prop('href',val); 
}); 

JS Fiddle demo

UPDATE

Here is an updated fiddle, показывающий, как назначить ссылку на основе selectiosn сделаны из падения капли. При таком подходе вам нужно будет определить соответствие между различными комбинациями с выпадающими списками и связанной с ними ссылкой, которая должна быть назначена. Я показал только две комбинации в демо.

Answer 2

var sel = document.getElementById('basic_plan'); 
var sel2 = document.getElementById('basic_plan2'); 
if(sel.value){ 
sel2.onchange = function() { 
    document.getElementById("abc").href = sel.value+""+this.value + ".html"; 
}} 

Эта часть работает только в том случае, если установлен первый - выбор. Надеюсь это поможет.

Answer 3

Зарегистрировать обработчик событий, который обрабатывает изменение любого из двух выпадающих меню и получает значение выбранных параметров.

var sel = document.getElementById('basic_plan1'); 
var sel2 = document.getElementById('basic_plan2'); 

sel.onchange = dropdownChange; 
sel2.onchange = dropdownChange; 

function dropdownChange() { 
    var fd = document.getElementById("basic_plan1"); 
    var sd = document.getElementById("basic_plan2"); 

    var firstValue = fd.options[fd.selectedIndex].value; 
    var secondValue = sd.options[sd.selectedIndex].value; 

    document.getElementById("abc").href = firstValue + secondValue + ".html"; 
} 

См. Это JSFiddle.

Answer 4

Вы можете добавить событие изменения в обоих выбирает, и построить URL после любого изменения

var basic_plan = document.getElementById("basic_plan"); 
 
    var basic_plan2 = document.getElementById("basic_plan2"); 
 
    function changeUrl() { 
 
     document.getElementById("def").innerHTML = "www.site.com/" + basic_plan.value + basic_plan2.value; 
 
    }

<div class="dropdown-plans"> 
 
    <select id="basic_plan" name="bill_cycle" onchange="changeUrl()"> 
 
     <option value="tri">3 Years - Rs. 100/month</option> 
 
     <option value="bi">2 Years - Rs. 200/month</option> 
 
     <option value="ann">1 Year - Rs. 100/month</option> 
 
    </select> 
 
</div> 
 
<div class="dropdown-plans2"> 
 
<select id="basic_plan2" name="bill_cycle2" onchange="changeUrl()"> 
 
    <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> 
 
    <br/> 
 
    <span id="def"></span> 
 
</div>

Answer 5

Вы можете увидеть мой код ниже, или это link для справки:

function GotoLink() { 
 
    var sel = $('.basic_plan option:selected').text(); 
 
    var sel2 = $('.basic_plan2 option:selected').text(); 
 
    alert('www.site.com/' + sel + '' + sel2 + ''); 
 
    document.getElementById("abc").href = 'www.site.com/' + sel + '' + sel2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="dropdown-plans"> 
 
    <select id="basic_plan" class="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-plans2"> 
 
    <select id="basic_plan2" class="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="#" onclick='GotoLink()'> Order now </a> 
 
</div>