Question

我正在使用脚本填充第二个Select。使用第二个选择的值与第一个选择配对。

    $("#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/ 那应该可以帮到你

级联下拉列表和选择链接到页面onchange

1 个答案: