[英]Jquery change select option depending on anchor change
我有这段代码用于选择选项:
<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的任何答案
如果我正确阅读了您的问题,那么我认为以下内容应该可以解决您的问题并减少代码重复。
$('#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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.