Output multiple values from a single

Question

Before I start, I just want to make sure there isn't a misunderstanding. This is not what I'm looking.

I created two interactive drop-down menus that show different sections according to your selection from their drop-down menu. Content is hidden until selected from drop-down menu lists. Everything works as planned but I'd like to add some enhancements but I don't know how to accomplish them.

Two drop-down menus show their options enter image description here

Current behavior:

When an option is selected from either drop-down menu list, the other drop-down menu list goes back to its default blank selection
When an option is selected from either drop-down menu list, it will show a <div class="headline"> which contains sub <div class="headline_box>'s
When hovering your cursor over each <div class="headline_box>, the background color will change as a visual feedback
When clicking on any <div class="headline_box>, an in-browser pop-up window will show up for more details. I am using Highslide JS to accomplish this.

enter image description here

I have several instances when an option (from "items" drop-down menu) falls into several categories. When the option is selected, it currently shows one category only, as coded. So I'd like to have a single option show all the appropriate categories. Take for instance 'apple', it would fall into "reds", "greens", and "fruits"--my current workaround is having three "apple" options under the items drop-down list but each one has a different value (inside <select id="item-filter"> )
When an option is selected from the items drop-down menu; it will highlight the result by using the background color used when the cursor is hovering. This highlight is temporary, after it's been clicked it should go back to a blank background color.

Code:

View demo here

Individual files: HTML, CSS, JS

(To view external files such as CSS, JS -- click on "Settings" at top of the page)

score 1 · Accepted Answer · edited May 23 '17 at 12:18

For your first question you could add all the categories, comma separated for example, in the select option. Then use that info 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 forked your Code Pen here.

For your second question, could you explain it better? I don't understand what are you trying to do.

UPDATE

For doing what you proposed in the comments try this:

Add this code AFTER you have attached the select change 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();
      }

Take notice of some things:

The default value is selected by the option text NOT value
You can´t select a default category AND item, it will trigger an alert.

Here is the updated Code Pen

References:

First of all, thank you so much for your help. You nailed it perfectly! As for my second question, I added a GIF so you can see what I mean and explained it in other words; I realized how confusing it was written, indeed. — Joe Morales, Jun 18 '15 at 15:29
Now I understand your second question. I will see what can I do and update my answer. — Alvaro Flaño Larrondo, Jun 18 '15 at 16:39
I think I got it and updated the Code Pen. Let me know if it works for you. — Alvaro Flaño Larrondo, Jun 18 '15 at 16:56
Can I have a pre-selected option form either one of the drop-down list menus AND having triggered the `
` — Joe Morales, Jun 24 '15 at 18:20
This is what I've gotten by adding `` http://i.stack.imgur.com/oJ999.png — Joe Morales, Jun 24 '15 at 18:27

ANR Upgraded Version · Answer 2 · 2015-06-17T14:15:06.377

Try this...

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

$('#category-filter').on('change',function(){
  $("#item-filter").val($(this).val());
});

Working CodePen Here

Output multiple values from a single in a drop-down menu (Highslide JS)

2 Answers2

Output multiple values from a single