Javascript/Jquery Link change form dropdown

Question

This may come off as confusing or simple i have no idea.

I have a picture, when you click on an element in the picture, i need the dropdown in the next div along to change.

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

That is an example of the links, this is an example of the dropdown.

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

Before anything is clicked, I dont want the menu to appear, but when they click say Eastern England i want Place A & B to appear in the dropdown, if they select Western England I want Place C, D & E to appear.

I have tried using an onclick which i could do easily to get the select menu to appear, but i can't get it to filter and remove elements etc or show/hide the div. I am already using the latest Jquery min library on the page. Any help is appreciated.

nicolast · Accepted Answer · 2013-01-04 11:29:20Z

2

here is the new html (with different classes for eastern and western) :

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

here is the javascript I would use:

   $(document).ready(function(){
        $('.areaselect').on('click', function(event){
            var id = $(this).attr('id')
            $('#apick option').not('.'+id).css('display','none');
            $('.'+id).css('display','inline').first().attr('selected','selected');
            event.preventDefault();
        });
    });

notice the "link" between <a> #id and <option> .class
(script not tested)

edited Jan 4, 2013 at 11:29

answered Jan 4, 2013 at 11:06

nicolast

7327 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Clarke Over a year ago

Ran this thru on jsfiddle (jsfiddle.net/dJbNA) Its outputting an error saying to use post request. Which i am assuming related to onclick not being valid. Is there an easy way (with ur script) to hide the form prior to any clicks?

nicolast Over a year ago

I've edited my code... when is the error triggered ? and what does it says ?

Michael Clarke Over a year ago

There is no error message any more but all items appear by default. My query is this. When you click western, it still shows Place A as the selected item, is it possible to change this or would that make things alot more complicated (if not then not a big issue). But hiding it all together prior to a click is v.important. In regarding changing the selected item (top), would having seperate select menus make this easier, so 2 dropdowns (1 eastern, 1 western) and the click changes which is visible and sets a text field to the name of the one being used for proper form handling.

nicolast Over a year ago

now the first selected item is ok. to have an empty list by default add a css #apick option{display:none;}

Michael Clarke Over a year ago

Perfect thankyou, made a v.minor tweak to hide form by default. Very much appreciated thankyou! jsfiddle.net/dJbNA/1 (for others who need the final solution) Marking as answered

|

Brune · Accepted Answer · 2013-01-04 11:27:08Z

0

With the same structure you can try using the gt and lt selectors of jQuery.

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

answered Jan 4, 2013 at 11:27

Brune

1,06010 silver badges20 bronze badges

Comments

Matanya · Accepted Answer · 2013-01-04 11:49:43Z

I'd give both the a tag and the corresponding option tags the same class. Then, onclick I'd display the relevant options:

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

JS:

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

Collectives™ on Stack Overflow

Javascript/Jquery Link change form dropdown

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related