Каскадирование выпадающего списка и выбор ссылок на страницу onchange

Question

Я использую скрипт для заполнения второго выбора. Используя значения второго, выберите пар для первого выбора.

$("#select1").change(function() { 
    if($(this).data('options') == undefined){ 
    $(this).data('options',$('#select2 option').clone()); 
    } 
    var id = $(this).val(); 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
    $('#select2').html(options); 
    }); 

Я бы хотел использовать onchange на втором, чтобы ссылаться на страницу. Это то, что я использую/хотел бы использовать.

<select ONCHANGE="location = this.options[this.selectedIndex].value;"> 
    <option value="http://www.apple.com/">Apple</option> 
    </select> 

Мой вопрос: Как я могу поместить URL в значении второго выбора, когда я использую это значение, чтобы определить с первым выбором?

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

Это мой HTML:

<div id="location_select"> 
    <table align="center"> 
    <tbody><tr> 
    <th><label for="select1">Province:</label></th> 
    <td> 
    <select id="select1" name="select1"> 
<option select="selected" value="0"></option> 
<option value="AB">Alberta</option> 
<option value="BC">British Columbia</option> 
</select></td> 
</tr> 
    <tr> 
    <th><label for="select2">City:</label></th> 
    <td> 
    <select id="select2" name="select2"> 
    <option value="0"></option> 
    <option value="AB"></option> 
    <option value="AB">a</option> 
    <option value="AB">b</option> 
    <option value="AB">c</option> 
    <option value="BC"></option> 
    <option value="BC">d</option> 
    <option value="BC">e</option> 
    <option value="BC">f</option> 
    </select> 
    </td> 
    </tr> 
    </tbody></table> 
    </div> 

Answer 1

Я изменил код немного:

Javascript:

$("#select2").attr("disabled", true); 

$("#select1").change(function() { 
    if($(this).data('options') == undefined){ 
     $(this).data('options',$('#select2 option').clone()); 
    } 
    var id = $(this).val(); 
    var options = $(this).data('options').filter('[id=' + id + ']'); 
    $('#select2').html(options); 
    $("#select2").attr("disabled", false); 
}); 


$("#select2").change(function() { 
    var link = $(this).val(); 
    alert(link); 
}); 

HTML-:

<div id="location_select"> 
    <table align="center"> 
    <tbody> 
    <th><label class="select_location_label" for="select1">Province:</label></th> 
    <td> 
    <select id="select1" name="select1"> 
<option select="selected" value="0"></option> 
<option value="AB">Alberta</option> 
<option value="BC">British Columbia</option> 
</select></td> 
</tr> 
    <tr> 
    <th><label class="select_location_label" for="select2">City:</label></th> 
    <td> 
    <select id="select2" name="select2"> 
    <option id="0">Select Province first</option> 
    <option id="AB" value="http://www.google.com"></option> 
    <option id="AB" value="http://www.google.com">a</option> 
    <option id="AB" value="http://www.google.com">b</option> 
    <option id="AB" value="http://www.google.com">c</option> 
    <option id="BC" value="http://www.google.com"></option> 
    <option id="BC" value="http://www.google.com">d</option> 
    <option id="BC" value="http://www.google.com">e</option> 
    <option id="BC" value="http://www.google.com">f</option> 
    </select> 
    </td> 
    </tr> 
    </tbody></table> 
    </div> 

См jsfiddle для рабочая версия: http://jsfiddle.net/7qDgZ/1/ Это должно помочь вам