0

スクリプトを使用して、2番目のSelectにデータを入力しています。2番目の選択の値を使用して最初の選択とペアリングします。

    $("#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);
    });

ページにリンクするために2番目の選択でonchangeを使用したいと思います。これは私が使用している/使用したいものです。

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

私の質問は次のとおりです。最初の選択で識別するためにその値を使用しているときに、URLを2番目の選択の値に入れるにはどうすればよいですか？

また、ページが読み込まれると、2番目の選択では、最初の選択が選択されるまですべてのオプションが表示され、一致する値を持つオプションのみが表示されます。

これは私の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 に答える