javascript - 如何使用 select 标签和 jquery 函数更改对 div 的内容进行排序

Question

我试图根据名为 risk 的变量对 div 的内容进行排序，该变量的值介于 1 到 10 之间。页面截图:

link to screenshot of my html page

我已经使用了 html 的选择标签和 jquery 的更改功能，但我不知道如何使用它们，因为我是 javascript 的初学者。我在选择标签中只有三个类别，即高风险、低风险、中等风险，我想根据这些类别进行排序。

1<=low risk<4
4<=medium risk<7
7<=high risk<=10

我使用的 jquery 函数是:-

    $("select").change(function(){
     alert("The text has been changed.");
    });

简而言之，我想对数据进行排序，然后重新显示在页面上。任何帮助将不胜感激。

Answer 1

我想你正在寻找这个。

$("#select").change(function() {
  var target = $(this).val();
  $(".test").removeClass("active");
  $(target).addClass("active");
});

.test {
  display: none;
}

.test.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1" class="test active">div 1</div>
<div id="test2" class="test">div 2</div>
<div id="test3" class="test">div 3</div>

<select name="" id="select">
  <option value="#test1">show div 1</option>
  <option value="#test2">show div 2</option>
  <option value="#test3">show div 3</option>
</select>