0

我正在使用脚本来填充第二个 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>

我的问题是：当我使用该值来识别第一个选择时，如何将 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>
4

1 回答 1

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/ 这应该可以帮助你

于 2013-02-22T14:57:42.650 回答