Output multiple values from one <option> in the dropdown menu (Highslide JS)

Question

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.

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

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.

enter image description here

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:

Open demo here

Separate files: HTML , CSS , JS

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

+3

jquery html css drop-down-menu

Joe morales June 16 15 at 18:51

source to share

2 answers

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

Working Pen code here

0

ANR Upgraded Version June 17. 15 at 14:08

source to share

Alvaro Flaño Larrondo · Accepted Answer · 2015-06-17T13:59:08+0000

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:

Trigger change event () when setting <select> 's value with val () function
jquery: How to select an option based on its text?

Output multiple values ​​from one <option> in the dropdown menu (Highslide JS)

More articles:

Output multiple values from one <option> in the dropdown menu (Highslide JS)