javascript - Jquery根据 anchor 更改更改选择选项

标签 javascript jquery css select

我有选择选项的这段代码:

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

当单击 anchor 并更改 div 以更改所选选项的输出(名称)时,我该如何实现?在第一个例子中,这是有效的,但是当我通过 anchor 改变它时它不起作用......

Tnx 任何答案

最佳答案

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

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

它会监听 a 的点击s 然后将选择列表的值设置为点击的id .一旦完成,它将触发 change选择列表上的事件导致您的 change监听器被触发。

还要在您的 id 上注明s 它们不应该只是一个数字:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").



来源: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 s 所以我建议您将它们命名为:
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/

关于javascript - Jquery根据 anchor 更改更改选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8952491/

相关文章:

html - 在<ul>中内嵌显示元素符号的样式中设置单个元素符号

javascript - 如何在单击按钮时将数组中的随机值分配给表格单元格

javascript - jQuery UI可排序-按属性值排序

html - 应用媒体查询时视频静音

jquery - wcf 服务被调用两次

javascript - 手动暂停时停止自动播放YouTube视频

javascript - 在 chrome 扩展中使用 chromecast

javascript - 当div值改变时执行javascript函数

javascript - 将列表分组为带有对象的较小列表

Firefox弹出窗口的Javascript调整大小?