Блог

Главная - Вопросы по программированию - Отображать содержимое на основе 3 выбранных опций из 3 разных меню выбора

Отображать содержимое на основе 3 выбранных опций из 3 разных меню выбора

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я пытаюсь отобразить определенный контент на основе 3 выбранных параметров из 3 разных (пользовательских) меню выбора

Чего я хочу, так это :

  • Отображать содержимое только при выборе 3 опций
  • Отображать только содержимое, имеющее 3 значения (каждого выбранного параметра), если у кого-то есть время, чтобы помочь мне, я был бы признателен

Вот что у меня есть на данный момент :

 /*---------------------------------------------------------*/
/*content from options selected*/
function func(select){
  $(select).find("option:selected").each(function(){
      var optionValue = $(this).attr("value");
      if(optionValue){
          $(".list").not("."   optionValue).hide();
          $("."   optionValue).show();
      } else{
          $(".list").hide();
      }
  });
}

/*---------------------------------------------------------*/
        /*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;
            }
        }
        func(s);
        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);  
 #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;
  }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select-container'>
    <div class="custom-select">
        <select>http://jsfiddle.net/9Qpjg/15/#update
            <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>

Ответ №1:

Вы могли бы сделать что-то вроде этого:

 function func(select) {
  var t = $('select').map(function() {
    if ($(this).val() != "none") return $(this).val();
  }).get().join('.');
  
  $(".list").hide();
  $(".list."   t).show();
}

ДЕМОНСТРАЦИЯ

 /*---------------------------------------------------------*/
/*content from options selected*/
function func(select) {
  var t = $('select').map(function() {
    if ($(this).val() != "none") return $(this).val();
  }).get().join('.');
  
  $(".list").hide();
  $(".list."   t).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;
        }
      }
      func(s);
      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);  
 #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;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='select-container'>
  <div class="custom-select">
    <select>http://jsfiddle.net/9Qpjg/15/#update
      <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>

Комментарии:

1. Привет, спасибо, что работает отлично, мне просто нужен способ отображать содержимое только при выборе 3 параметров