基于三个自定义下拉菜单选中项匹配展示对应内容的技术求助

Hey there! Let's fix your issue step by step. The main problem with your current code is that it filters content based on each select individually without checking if all three are selected, and the filtering logic doesn't properly handle the "all three conditions must match" requirement. Here's how to adjust it:

Step 1: Replace the func with a new filtering function #

Instead of filtering based on a single select's value, we'll first collect all three selected values, validate they're all set (not 'none'), then show only the elements that have all three matching classes.

function filterContent() {
  // Get all three select elements
  const selects = document.querySelectorAll('.custom-select select');
  const selectedValues = Array.from(selects).map(sel => sel.value);
  
  // Check if any select is still on the default 'none' option
  const allSelected = selectedValues.every(val => val !== 'none');
  
  if (!allSelected) {
    // Hide all content if any select isn't selected
    $('.list').hide();
    return;
  }
  
  // Show only elements that have ALL three selected classes
  $('.list').hide();
  $('.list.' + selectedValues.join('.')).show();
}

Step 2: Update the custom select click handler to call the new function #

In your custom select code, where you call func(s), replace it with filterContent() instead. This ensures every time a selection is made, we run the full validation and filtering.

Find this part:

func(s);

Replace with:

filterContent();

Step 3: Ensure initial state is correct #

Your CSS already sets #results-container > div { display: none; }, which is perfect—this means nothing shows until all three selects are chosen. I also added missing CSS variables to prevent styling issues.

Full modified code #

Here's the complete working code with all changes applied:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#results-container > div {
 display: none;
}
#select-container > div {
 display: inline-flex;
 justify-content: space-evenly;
}
/*---------------------- Select Style ----------------------*/
.custom-select {
 position: center;
 margin:20px;
}
.custom-select select {
 display:none; /*hide original SELECT element:*/
}
.select-selected {
 all: initial;
 color: var(--main);
 font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
 position: sticky;
 background-color: var(--white);
 border-radius: 10px;
 -webkit-box-shadow: 0 5px 9px 0 rgba(193, 193, 193, 0.5);
 box-shadow: 0 5px 9px 0 rgba(193, 193, 193, 0.5);
 cursor: pointer;
 display: -webkit-inline-box;
 display: -ms-inline-flexbox;
 display: inline-flex;
 padding: calc(0.5rem - 1px) 0.7rem;
 font-size: 0.800rem;
 min-width: 7rem;
 max-width: 12rem;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 min-height: 1.5rem;
 text-align: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 font-weight: 700;
 line-height: 1.5rem;
 vertical-align: middle;
 -moz-appearance: none;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}
.select-selected:hover {
 color: var(--main);
 background-color: var(--hover);
}
/*-----------------------------------------------------------------*/
/*Arrow Down*/
.select-selected:after {
 content: "";
 margin: 5px 0px 0px 5px;
 border: 5px solid;
 border-color: #000000 transparent transparent transparent;
}
/*Arrow Up*/
.select-arrow-active:after {
 content: "";
 margin: 0px 0px 5px 5px;
 border: 5px solid;
 border-color: transparent transparent #000000 transparent;
}
/*-----------------------------------------------------------------*/
/*style the items (options)*/
.select-items div {
 color: var(--main);
 font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
 padding: calc(0.5rem - 1px) 0.7rem;
 font-size: 0.800rem;
 min-width: 7rem;
 max-width: 12rem;
 text-align: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 font-weight: 700;
 line-height: 1.5rem;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/*style items (zone globale):*/
.select-items {
 position: absolute;
 z-index: 1200;
 color: var(--main);
 background-color: var(--white);
 border-radius: 0px 0px 10px 10PX;
 min-width: 7rem;
 max-width: 13rem;
 -webkit-box-shadow: 0 5px 9px 0 rgba(193, 193, 193, 0.5);
 box-shadow: 0 5px 9px 0 rgba(193, 193, 193, 0.5);
 margin-top: 40px;
}
/*hide the items when the select box is closed:*/
.select-hide {
 display: none;
}
.select-items div:hover {
 background-color: var(--hover);
 border-radius: 10px;
 color: var(--main);
}
.large{
 margin-top: 2rem;
}
/* Add missing CSS variables */
:root {
  --main: #000;
  --white: #ffffff;
  --hover: #f5f5f5;
}
</style>
<div id='select-container'>
 <div class="custom-select">
 <select>
 <option value='none'>Select Option</option>
 <option value='dog'>Dog</option>
 <option value='cat'>Cat</option>
 </select>
 </div>
 <div class="custom-select">
 <select>
 <option value='none'>Select Option</option>
 <option value='red'>Red</option>
 <option value='blue'>Blue</option>
 </select>
 </div>
 <div class="custom-select">
 <select>
 <option value='none'>Select Option</option>
 <option value='male'>Male</option>
 <option value='female'>Female</option>
 </select>
 </div>
</div>
<div id='results-container'>
 <div class='dog red male list'>Red Dog Male</div>
 <div class='dog red female list'>Red Dog Female</div>
 <div class='dog blue male list'>Blue Dog Male</div>
 <div class='dog blue female list'>Blue Dog Female</div>
 <div class='cat red male list'>Red Cat Male</div>
 <div class='cat red female list'>Red Cat Female</div>
 <div class='cat blue male list'>Blue Cat Male</div>
 <div class='cat blue female list'>Blue Cat Female</div>
</div>
<script>
/*---------------------------------------------------------*/
/*content from options selected*/
function filterContent() {
  // Get all three select elements
  const selects = document.querySelectorAll('.custom-select select');
  const selectedValues = Array.from(selects).map(sel => sel.value);
  
  // Check if any select is still on the default 'none' option
  const allSelected = selectedValues.every(val => val !== 'none');
  
  if (!allSelected) {
    // Hide all content if any select isn't selected
    $('.list').hide();
    return;
  }
  
  // Show only elements that have ALL three selected classes
  $('.list').hide();
  $('.list.' + selectedValues.join('.')).show();
}
/*---------------------------------------------------------*/
/*Custom select*/
var x, i, j, l, ll, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
 selElmnt = x[i].getElementsByTagName("select")[0];
 ll = selElmnt.length;
 /*for each element, create a new DIV that will act as the selected item:*/
 a = document.createElement("DIV");
 a.setAttribute("class", "select-selected");
 a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
 x[i].appendChild(a);
 /*for each element, create a new DIV that will contain the option list:*/
 b = document.createElement("DIV");
 b.setAttribute("class", "select-items select-hide");
 for (j = 1; j < ll; j++) {
 /*for each option in the original select element, create a new DIV that will act as an option item:*/
 c = document.createElement("DIV");
 c.innerHTML = selElmnt.options[j].innerHTML;
 c.addEventListener("click", function(e) {
 /*when an item is clicked, update the original select box, and the selected item:*/
 var y, i, k, s, h, sl, yl;
 s = this.parentNode.parentNode.getElementsByTagName("select")[0];
 sl = s.length;
 h = this.parentNode.previousSibling;
 for (i = 0; i < sl; i++) {
 if (s.options[i].innerHTML == this.innerHTML) {
 s.selectedIndex = i;
 h.innerHTML = this.innerHTML;
 y = this.parentNode.getElementsByClassName("same-as-selected");
 yl = y.length;
 for (k = 0; k < yl; k++) {
 y[k].removeAttribute("class");
 }
 this.setAttribute("class", "same-as-selected");
 break;
 }
 }
 filterContent(); // Updated to call our new function
 h.click();
 });
 b.appendChild(c);
 }
 x[i].appendChild(b);
 a.addEventListener("click", function(e) {
 /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/
 e.stopPropagation();
 closeAllSelect(this);
 this.nextSibling.classList.toggle("select-hide");
 this.classList.toggle("select-arrow-active");
 });
}
function closeAllSelect(elmnt) {
 /*a function that will close all select boxes in the document, except the current select box:*/
 var x, y, i, xl, yl, arrNo = [];
 x = document.getElementsByClassName("select-items");
 y = document.getElementsByClassName("select-selected");
 xl = x.length;
 yl = y.length;
 for (i = 0; i < yl; i++) {
 if (elmnt == y[i]) {
 arrNo.push(i)
 } else {
 y[i].classList.remove("select-arrow-active");
 }
 }
 for (i = 0; i < xl; i++) {
 if (arrNo.indexOf(i)) {
 x[i].classList.add("select-hide");
 }
 }
}
/*if the user clicks anywhere outside the select box, then close all select boxes:*/
document.addEventListener("click", closeAllSelect);
</script>

Key explanations: #

• filterContent() first checks if all three selects have a valid value (not 'none'). If not, it hides all content.
• When all are selected, it uses jQuery's class selector with all three values joined by dots (e.g., .dog.red.male) to target only elements that match all three conditions.
• We replaced the old func(s) call with filterContent() to ensure every selection triggers the full validation and filtering logic.
• Added missing :root CSS variables so your custom styles work as expected.

That should do exactly what you need: only show content when all three selects are chosen, and only show content that matches all three selected options.

内容的提问来源于stack exchange，提问作者Nadso