級聯下拉列表和選擇鏈接到頁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> 

我的問題是：我怎麼可以把網址中的價值，當我使用該值來標識與第一選擇第二選擇？

此外，當頁面加載第二個選擇顯示所有選項，直到選擇第一個選擇，那麼它將只顯示具有匹配值的那些。

這是我的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/ 這應該會對你有所幫助