2

I have this piece of code for select option:

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

On select change I already have to change its background like this (displaying or hiding specific div):

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

But, now I have mini navigation which is also displaying or hiding same div's

<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 for this:

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

How can I achieve when anchor is clicked and div is changed to change output (name) of selected option also? In first example that is working, but when I am changing it through anchors it doesnt work ...

Tnx for any answers

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
Matas
  • 165
  • 3
  • 9
  • How about changing the selectbox selection in your map-menu handler? That would also trigger the `change` event and you wouldn't have to write it twice. – vgru Jan 21 '12 at 11:13
  • As a side note: 1. Make sure that you don't repeat Ids in your HTML, 2. Add a common css class to your `FormX` elements and use that as a selector. – vgru Jan 21 '12 at 11:17
  • Just a note, it helps if you setup a test case with [jsfidde](http://jsfiddle.net/) That way, people can reproduce your problem instantly. – Andomar Jan 21 '12 at 11:32

1 Answers1

1

If I read your question correctly then I think the following should solve your problem and reduce code repetition.

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

It will listen for a click on the as and then set the value of the select list to the clicked id. Once this is complete it will trigger the change event on the select list causing your change listener to be triggered.

Also a note on your ids they should not just be a number:

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 (".").

Source: https://stackoverflow.com/a/703790/461813

Updated work around from comments

If you want to use your current HTML then it would be something like this:

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

But it should be noted that your code currently does not have unique ids so I suggest you namespace them like:

select_option_1
anchor_option_1

Then the above code would become:

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

And here it is as a jsFiddle you can run: http://jsfiddle.net/6tHnj/

Community
  • 1
  • 1
Treffynnon
  • 21,365
  • 6
  • 65
  • 98
  • Now everytime when you are using mini navigation it jumps to the first option (Select region) no matter where I click. Also, yes I know about using ID's and numbers at the start of ID. Will change that later :) – Matas Jan 21 '12 at 11:20
  • That is because your `id`s need to be the same as your select options values for this to work. – Treffynnon Jan 21 '12 at 11:32
  • @Matas see my update answer for some solutions to the issues you are facing. – Treffynnon Jan 21 '12 at 11:39
  • thanks mate this is working! Also thanks for any suggestions you made, I will fix that :) – Matas Jan 21 '12 at 13:33