Question

这可能会让人感到困惑或简单，我不知道。

我有一张图片，当你点击图片中的元素时，我需要在下一个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>

在点击任何内容之前，我不希望菜单出现，但是当他们点击说英格兰东部时我想要Place A＆amp; B出现在下拉列表中，如果他们选择西部英格兰，我想要Place C，D＆amp; E出现。

我尝试使用onclick，我可以很容易地让选择菜单出现，但我不能让它过滤和删除元素等或显示/隐藏div。我已经在页面上使用了最新的Jquery min库。任何帮助表示赞赏。

Answer 1

这是新的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之间的“链接” （脚本未经测试）

Answer 2

使用相同的结构，您可以尝试使用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');
     });
});

Answer 3

我会将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
});

Javascript / Jquery链接更改表单下拉列表

3 个答案: