Question

我有这段代码用于选择选项：

<select class="select-box" name="select-choice-month" id="select-locations">
  <option id="1">Select Region</option>
  <option id="2" value="eu">Europe</option>
  <option id="3" value="nam">North America</option>
  <option id="4" value="sam">Latin America</option>
  <option id="5" value="aspa">Asia/Pacific</option>
</select>

在选择更改时，我必须更改其背景（显示或隐藏特定div）：

$('#select-locations').change(function() {
    $('#form1, #form2, #form3, #form4, #form5').hide();
    $('#form' + $(this).find('option:selected').attr('id')).show();
});

但是，现在我有迷你导航也显示或隐藏相同的div

<div id="map-menu">
    <a href="#" id="3">North America</a>
    <a href="#" id="4">Latin America</a>
    <a href="#" id="5">Asia/Pacific</a>
</div><!-- end of map-menu -->

Jquery：

$('#map-menu a').click(function() {
    $('#form1, #form2, #form3, #form4, #form5').hide();
    $('#form' + $(this).attr('id')).show();
});

如何点击锚点并更改div以更改所选选项的输出（名称）？在第一个有效的例子中，但是当我通过锚点改变它时它不起作用......

任何答案的Tnx

Answer 1

如果我正确地阅读了您的问题，那么我认为以下内容可以解决您的问题并减少代码重复。

$('#map-menu a').click(function() {
    $('#select-locations').val(this.id).change();
});

它会监听a上的点击，然后将选择列表的值设置为点击的id。完成此操作后，它将触发选择列表上的change事件，从而导致change侦听器被触发。

同样关于id的说明，它们不应只是一个数字：

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

来源：https://stackoverflow.com/a/703790/461813

更新了评论工作

如果您想使用当前的HTML，那么它将是这样的：

$('#map-menu a').click(function() {
    var select = $('#select-locations');
    var option_to_select = $('option[id="' + this.id + '"]', select);
    select.val(option_to_select.val()).change();
});

但是应该注意，您的代码目前没有唯一的id，所以我建议您将它们命名为：

select_option_1
anchor_option_1

然后上面的代码将成为：

$('#map-menu a').click(function() {
    var option_id = this.id.replace('anchor', 'select');
    var select = $('#select-locations');
    var option_to_select = $('option[id="' + option_id + '"]', select);
    select.val(option_to_select.val()).change();
});

在这里，你可以运行jsFiddle：http://jsfiddle.net/6tHnj/

Jquery根据锚更改更改选择选项

1 个答案:

更新了评论工作