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

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

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

Placea
地点B
Placec
放置
普莱西

在单击任何内容之前，我不希望菜单出现，但当他们单击“说英格兰东部”时，我希望A和B位置出现在下拉列表中，如果他们选择英格兰西部，我希望C、D和E位置出现

我尝试过使用onclick，我可以很容易地让select菜单出现，但是我不能让它过滤和删除元素等，也不能显示/隐藏div。我已经在使用页面上最新的Jquery-min库了。非常感谢您的帮助。

这是新的html（东西方有不同的类）：

注意

#id

和

.class

之间的“链接”

---

（脚本未测试）

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

---

我会给

a

标记和相应的

选项

标记赋予相同的类。然后，

onclick

I将显示相关选项：

<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>

---

在jsfiddle（）上运行这个thru，其输出错误为使用post请求。我假设与onclick相关的内容无效。有没有一种简单的方法（使用你的脚本）在点击前隐藏表单？我已经编辑了我的代码。。。错误何时触发？它说什么呢？不再有错误消息，但默认情况下会显示所有项目。我的问题是。当您单击“西部”时，它仍然显示“地点A”作为所选项目，是否有可能对此进行更改，或者这会使事情变得更加复杂（如果没有，则不是一个大问题）。但在单击之前将其全部隐藏起来是非常重要的。关于更改所选项目（顶部），使用单独的选择菜单是否会使更改更容易，因此，2个下拉菜单（1个东部，1个西部）和单击更改是可见的，并将文本字段设置为用于正确处理表单的名称。现在，第一个所选项目已确定。要在默认情况下拥有一个空列表，请添加一个css

#apick选项{display:none；}

Perfect thankyou，对默认情况下隐藏表单进行了v.minor调整。非常感谢！（对于需要最终解决方案的其他人）按回答进行标记

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

<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>

$("a").click(function(){
this_class= $(this).attr("class");
$("#apick").find("option").hide(); // reset
$("#apick").find("." + this_class).show(); // show desired options
});