0

これがhtmlなのかjavascriptの技術なのかわかりません。そのように実現したいのですが、2つの選択ボックスのみを表示します。インドをクリックすると、別の選択ボックスにインドのオプションのみが表示され name="listtwo" id="listtwo"ます。米国をクリックすると、都市のオプションが表示されます。誰かが例を挙げていただけませんか。どうもありがとう

インド米国ドイツ 

    <select name="listtwo" id="listtwo">
        <option value="Indiacity1">Indiacity1</option>
        <option value="Indiacity2">Indiacity1</option>
        <option value="Indiacity3">Indiacity1</option>
    </select>

  <select name="list3" id="list3">
        <option value="Germany1">Germany1</option>
        <option value="Germany2">Germany1</option>
        <option value="Germany3">Germany1</option>
    </select>

<select name="list4" id="list4">
        <option value="US1">US1</option>
        <option value="US2">US1</option>
        <option value="US3">US1</option>
    </select>​
4

2 に答える 2

2

HTML：

<select id="country-select">
    <option>--- Select One ---</option>
    <option value="us">US</option>
    <option value="germany">Germany</option>
</select>

<select id="us-select" class="sub-menu hide">
    <option value="austin">Austin</option>
</select>

<select id="germany-select" class="sub-menu hide">
    <option value="berlin">Berlin</option>
</select>​

CSS：

.hide {
    display: none;            
}​

jQuery：

$('#country-select').change(function (e) {
    $('.sub-menu').hide();
    var selectedCountry = $(this).val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }       
});​

そして誰もがチェックアウトするためのフィドル：http：//jsfiddle.net/RPWPZ/3/

もちろん、インドやその他の気になる国のすべてのアイテムを追加する必要があります。

編集：ページの読み込み時に国を選択する場合は、このフィドルの変更を確認してください：http: //jsfiddle.net/RPWPZ/5/

于 2012-09-25T21:55:00.610 に答える
1 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

  $('select').hide();
  $('#list2').show();

  $('.country').click(function(e) {
    $('select').hide();
    $('#'+$(e.target).attr('sel')).show();

  });
});
</script>


<a class="country" href="javascript:;" sel="list2">India</a>&nbsp;
<a class="country" href="javascript:;" sel="list3">Germany</a>&nbsp;
<a class="country" href="javascript:;" sel="list4">US</a>&nbsp;

<br><br>

<select name="list2" id="list2">
        <option value="Indiacity1">Indiacity1</option>
        <option value="Indiacity2">Indiacity1</option>
        <option value="Indiacity3">Indiacity1</option>
</select>

<select name="list3" id="list3">
        <option value="Germany1">Germany1</option>
        <option value="Germany2">Germany1</option>
        <option value="Germany3">Germany1</option>
</select>

<select name="list4" id="list4">
        <option value="US1">US1</option>
        <option value="US2">US1</option>
        <option value="US3">US1</option>
</select>
于 2012-09-25T22:09:24.210 に答える