0

これは、紛らわしい、または単純なものとして外れる可能性があります。

私は写真を持っています。写真の要素をクリックすると、次のdivのドロップダウンを変更する必要があります。

<a href="eastern#browse" class="areaselect" rel="region_7" id="eastern" title="Eastern England image">Eastern England</a>
<a href="western#browse" class="areaselect" rel="region_8" id="western" title="Western England image">Western England</a>

これはリンクの例であり、これはドロップダウンの例です。

<select name='areapick' id='apick'>
    <option value='placea'>Placea</option>    
    <option value='placeb'>Placeb</option>    
    <option value='placec'>Placec</option>
    <option value='placed'>Placed</option>    
    <option value='placee'>Placee</option>
</select>

何かがクリックされる前に、メニューを表示したくありませんが、「Eastern England」をクリックすると、ドロップダウンにPlace A＆Bが表示されます。WesternEnglandを選択した場合は、Place C、D、Eが表示されます。

選択メニューを表示するために簡単に実行できるonclickを使用してみましたが、要素などをフィルタリングして削除したり、divを表示/非表示にしたりすることができません。このページですでに最新のJqueryminライブラリを使用しています。どんな助けでも大歓迎です。

4

3 に答える 3

2

これが新しいhtmlです（東部と西部で異なるクラスがあります）：

<select name='areapick' id='apick'>
        <option value='placea' class="eastern">Placea</option>    
        <option value='placeb' class="eastern">Placeb</option>    
        <option value='placec' class="western">Placec</option>
        <option value='placed' class="western">Placed</option>    
        <option value='placee' class="western">Placee</option>
    </select>

これが私が使用するjavascriptです：

   $(document).ready(function(){
        $('.areaselect').on('click', function(event){
            var id = $(this).attr('id')
            $('#apick option').not('.'+id).css('display','none');
            $('.'+id).css('display','inline').first().attr('selected','selected');
            event.preventDefault();
        });
    });

<a> #idとの間の「リンク」に注意してください<option> .class
（スクリプトはテストされていません）

于 2013-01-04T11:06:16.077 に答える
0

aタグと対応するタグの両方にoption同じクラスを与えます。次に、onclick関連するオプションを表示します。

<a href="eastern#browse" rel="region_7" class="eastern" title="Eastern England image">Eastern England</a>
<a href="western#browse" rel="region_8" class="western" title="Western England image">Western England</a>


<select name='areapick' id='apick'>
        <option value='placea' class="eastern">Placea</option>    
        <option value='placeb' class="eastern">Placeb</option>    
        <option value='placec' class="western">Placec</option>
        <option value='placed' class="western">Placed</option>    
        <option value='placee' class="western">Placee</option>
    </select>

JS：

$("a").click(function(){
this_class= $(this).attr("class");
$("#apick").find("option").hide(); // reset
$("#apick").find("." + this_class).show(); // show desired options
});
于 2013-01-04T11:42:38.973 に答える
0

同じ構造で、jQueryのgtセレクターとltセレクターを使用してみることができます。

$(document).ready(function(){
     $('.areaselect').on('click', function(){
         $('#apick').css('display','none');
         $('#apick option').css('display','inline');
         var title = $(this).attr('id');
         if(title.indexOf('eastern') != -1){
              $('#apick option:gt(1)').css('display','none');//Zero based index
         }
         else{
              $('#apick option:lt(2)').css('display','none');//Zero based index
         }
         $('#apick').css('display','inline-block');
     });
});
于 2013-01-04T11:27:08.610 に答える