Reputation: 169
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.
Upvotes: 0
Views: 346
Reputation: 6346
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
});
Upvotes: 0
Reputation: 732
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)
Upvotes: 2
Reputation: 1060
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');
});
});
Upvotes: 0