Output multiple values from one <option> in the dropdown menu (Highslide JS)
Before I start, I just want to make sure there is no misunderstanding. This is not what I am looking for.
I have created two interactive dropdown menus that show different sections according to your selection in the dropdown menu. Content is hidden until selected from dropdown lists. Everything works as planned, but I would like to add some improvements, but I do not know how to accomplish them.
Current behavior:
- If an option is selected in the dropdown list, the default empty selection is returned in the dropdown list
- If an option is selected in the dropdown list, it will display
<div class="headline">
that contains<div class="headline_box>
- Hovering over each
<div class="headline_box>
background color will change as visual feedback - Clicking on any
<div class="headline_box>
will bring up a popup in the browser for more details. I am using Highslide JS to accomplish this.
- I have a couple of cases where an option (from the "items" dropdown menu) falls into multiple categories. When selected, it currently only displays one category as encoded. So I would like one parameter to show all relevant categories. For example, "apple", it will fall into "red", "green" and "fruit". My current workaround has three "apple" options in the item dropdown, but each has a different meaning (inside
<select id="item-filter">
) - If the option is selected from the drop-down menu of items; it will highlight the result using the background color used on hover. This highlight is temporary and should return to a blank background color when clicked.
code:
Separate files: HTML , CSS , JS
(To view external files such as CSS, JS - click "Settings" at the top of the page)
source to share
For your first question, you can add all categories separated by commas, for example in the select options. Then use this information to show what you need.
Html
<span>Items: </span><br />
<select id="item-filter">
<option value="blank"></option>
<option value="greens,reds,fruit">Apple</option>
<option value="greens,vegetable">Asparagus</option>
<option value="fruit">Banana</option>
<option value="reds">Car</option>
</select>
JavaScript
//Reset background color when clicked
$(".headline_box").click(function(){$(this).css('background-color','initial')});
//Filtering
function selectCategory(category) {
if (category.attr('id') == 'category-filter') {
$('#item-filter').val('blank');
}
else if (category.attr('id') == 'item-filter') {
$('#category-filter').val('blank');
}
//Show results
$(".category").hide();
var depts = category.val().split(',');
$.each(depts,function(index,value){
$(".category-" + value).show();
});
//Highlight results
$(".headline_box").css('background-color','initial');
var selected_item = category.find("option:selected").text();
$("h4:contains('"+selected_item+"')").parents(".headline_box").css('background-color','#fae6cf');
}
I have unlocked the Code Pen here .
For your second question, could you please explain this better? I don't understand what you are trying to do.
UPDATE
To do what you suggested in the comments, try this:
Add this code AFTER you have added the pick pick function:
//PRESELECTED-OPTIONS
var preselectedCategory = "";
var preselectedItem = "Asparagus";
if(preselectedCategory && preselectedItem )
alert("System Error: You can only preselect Category OR Items");
else if(preselectedCategory){
var select_val = $("#category-filter option").filter(function () { return $(this).html() == preselectedCategory; }).val();
$("#category-filter").val(select_val).change();
}
else if(preselectedItem){
var select_val = $("#item-filter option").filter(function () { return $(this).html() == preselectedItem; }).val();
$("#item-filter").val(select_val).change();
}
Pay attention to some things:
- The default is selected by the
text
NOT optionvalue
- You cannot select the default category and item, this will raise a warning.
Here is the updated Code Pen
Literature:
source to share
Try it...
<select id="item-filter" multiple>
<option value="blank"></option>
<option value="greens">Apple</option>
<option value="reds">Apple</option>
<option value="fruit">Apple</option>
<option value="vegetable">Asparagus</option>
<option value="greens">Asparagus</option>
<option value="fruit">Banana</option>
<option value="reds">Car</option>
</select>
and add the following script
$('#category-filter').on('change',function(){
$("#item-filter").val($(this).val());
});
source to share