JQuery基于两个选定选项将类添加到元素

hrirmatl  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(148)

我对jQuery非常陌生。
我有两个下拉菜单5个选项。我想添加一个类在一个div取决于哪个选项被选中。这个类然后将改变布局的内容使用CSS。我知道如何与一个下拉菜单,但我有点困惑与两个
谢啦,谢啦
这里有一个例子,如果它帮助!

<select class="" id="fil-select" data-target=".point">
  <option value="Very Low" class=".red">Very Low</option>
  <option value="Low" class=".green">Low</option>
  <option value="Average" class=".blue">Average</option>
  <option value="High" class=".pink">High</option>
  <option value="Very High" class=".yellow">Very High</option>
</select>

<select class="" id="fil-select2" data-target=".point">
  <option value="Very Low" class=".size1">Very Low</option>
  <option value="Low" class=".size2">Low</option>
  <option value="Average" class=".size3">Average</option>
  <option value="High" class=".size4">High</option>
  <option value="Very High" class=".size5">Very High</option>
</select>

<div class="point"></div>
643ylb08

643ylb081#

下面的代码有点冗长,但我希望它能向你展示它是如何完成的基本逻辑。请运行下面的代码片段并检查--这是你想要的吗?

function assignClassesFromDropdowns(){
   const firstSelectValue = $('#fil-select').val();
   const secondSelectValue = $('#fil-select2').val();
   
   //remove existing classes, then re-attach what I assume is the default class
   $('.point').removeClass().addClass('point');
   
   //add the classes
   $('.point').addClass(firstSelectValue);
   $('.point').addClass(secondSelectValue);
   
   //below is just to display the existing classes as text inside the div
   $('.point').text($('.point').attr('class'))
}

//run our function on load
assignClassesFromDropdowns();

//run our function whenever any of the dropdowns change
$('#fil-select, #fil-select2').on('change', function(){

  assignClassesFromDropdowns();  

})
.wrapper {
  display:flex;
  justify-content:center;
  align-items:center;
}
.selects {
  margin-right:20px;
}

.point {
  border:1px solid black;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.red {
  background:red;
}
.green {
  background:green;
}
.blue {
  background:blue;
}
.pink {
  background:pink;
}
.yellow {
  background:yellow;
}

.size1 {
  width:100px;
  height:100px;
}
.size2 {
  width:150px;
  height:150px;
}
.size3 {
  width:200px;
  height:200px;
}
.size4 {
  width:250px;
  height:250px;
}
.size5 {
  width:300px;
  height:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">

<div class="selects">
<div>first select</div>
<select class="" id="fil-select" data-target=".point">
  <option value="red">Very Low</option>
  <option value="green">Low</option>
  <option value="blue">Average</option>
  <option value="pink">High</option>
  <option value="yellow">Very High</option>
</select>
<br><br>
<div>second select</div>
<select class="" id="fil-select2" data-target=".point">
  <option value="size1">Very Low</option>
  <option value="size2">Low</option>
  <option value="size3">Average</option>
  <option value="size4">High</option>
  <option value="size5">Very High</option>
</select>
</div>

<div class="point"></div>
</div>

相关问题