从下拉菜单中的单个 <option> 输出多个值（Highslide JS）

Question

在开始之前，我只想确保没有误解。 This 不是我想要的。

我创建了两个交互式下拉菜单，它们根据您在下拉菜单中的选择显示不同的部分。在从下拉菜单列表中选择之前，内容是隐藏的。一切都按计划进行，但我想添加一些增强功能，但我不知道如何完成它们。

当前行为：

当从任一下拉菜单列表中选择一个选项时，另一个下拉菜单列表将返回其默认的空白选择
当从任一下拉菜单列表中选择一个选项时，它将显示一个 <div class="headline">，其中包含子 <div class="headline_box> 的
将光标悬停在每个 <div class="headline_box> 上时，背景颜色会随着视觉反馈而变化
单击任何 <div class="headline_box> 时，浏览器内的弹出窗口 window 将显示更多详细信息。我正在使用 Highslide JS 来完成这个。

我有几个实例将一个选项（来自 "items" 下拉菜单）分为几个类别。选择该选项后，它当前仅显示一个类别，如编码所示。所以我想要一个选项来显示所有适当的类别。以 'apple' 为例，它将分为 "reds"、"greens" 和 "fruits"——我目前的解决方法是在项目下拉项下有三个 "apple" 选项-向下列表，但每个都有不同的值（在 <select id="item-filter"> 内）
当从项目下拉菜单中选择一个选项时；它将通过使用光标悬停时使用的背景颜色突出显示结果。此突出显示是临时的，点击后它应该恢复为空白背景颜色。

代码：

View demo here

单个文件：HTML, CSS, JS

（要查看 CSS、JS 等外部文件——点击页面顶部的 "Settings"）

Answer 1

对于第一个问题，您可以在 select 选项中添加所有类别，例如以逗号分隔。然后使用该信息来显示您的需求。

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

我分叉了你的Code Pen here。

关于你的第二个问题，你能解释一下吗？我不明白你想做什么。

更新

要执行您在评论中提出的建议，请尝试以下操作：

添加此代码在您附加了 select 更改功能之后：

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

注意一些事情：

默认值是 select 选项 text 不是 value
您不能 select 默认类别和项目，它会触发警报。

这是更新后的 Code Pen

参考文献：

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

Answer 2

试试这个...

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

并添加以下脚本

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

Working CodePen Here

从下拉菜单中的单个 <option> 输出多个值（Highslide JS）

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

html

css

jquery

drop-down-menu