每次我选择新选项时，在select option标记中选择新值都会合并该值

Question

我不知道代码中发生了什么，但是我的目标是，每次用户每次在我的Select标记中选择一个新值时，它将重置所有字段，我的select标记上的每个菜单都有唯一的data-attribute值，它是一个数组。

我只想获取所选标签的值，并在单击菜单后将其显示在我的字段中。

这是我的代码。

const url = window.location.origin;
var data_assessment;
$( document ).ready(function() {

    $('.category_icons').css("cursor", "not-allowed");

      $('#sets_id').on('change', function (e) {
        e.preventDefault();

        data_assessment = [];
        $('.category_icons').css("cursor", "not-allowed");
        $('.category_icons').removeClass('active_category');

        var first_category_type;
        var user_set_id;

        var category_values = []; //1,2,3
        var category_type = []; //1,2
        var category_name = []; //Reading,grammar,listening
        var num_of_exercises = 0; //updating the value in the div
        var num_of_scenarios = 0; //updating the value in the div
        var duration = 0; //updating the value in the div
        var counter_selected_assessments = 0;

        var first_category = $("#first_category input:hidden").val();
        var first_category_id = $("#first_category_id").val();
        var first_category_name = $('#first_category_id').data('category');

        data_assessment = JSON.parse($("#sets_id option:selected").attr('data-category'));
        console.log(data_assessment)

        $('#first_category').css("background", "rgb(0,0,0,0.5)");

        $('#first_category .category_icons').css("background", "rgb(242,242,242)");

        $('#selected_categories').val("");
        $('#selected_type').val("");
        $('#user_set_id').val("");
        $('#selected_categories_name').val("");

        $('#selected_assessment').text(parseInt(0));
        $('#num_of_exercises').text(parseInt(0));
        $('#total_number_scenarios').text(parseInt(0));
        $('#time_required').text(parseInt(0));

        for (var key in data_assessment) {
            $('.category_' + key).css("cursor", "pointer");
            $('.category_' + key).addClass("active_category");
        }

        if ($("#first_category .category_icons").hasClass('active_category')) {
            $("#first_category .category_icons").click(function() {

                first_category_type = data_assessment[first_category_id].topic_type;
                user_set_id = data_assessment[first_category_id].user_set_id;

                if (category_values.includes(first_category)) {
                    counter_selected_assessments--;

                    category_values.splice(category_values.indexOf(first_category), 1);
                    category_type.splice(category_type.indexOf(first_category_type), 1);
                    category_name.splice(category_name.indexOf(first_category_name), 1);

                    num_of_exercises = parseInt($('#num_of_exercises').text()) - data_assessment[first_category_id].total_number_of_exercises;
                    num_of_scenarios = parseInt($('#total_number_scenarios').text()) - data_assessment[first_category_id].total_number_of_scenarios.length;
                    duration = parseInt($('#time_required').text()) - data_assessment[first_category_id].duration;
                    //
                    $('#first_category').css("background", "rgb(0,0,0,0.5)");
                    $('#first_category .category_icons').css("background", "rgb(242,242,242)");
                    $('#selected_categories').val(category_values)
                    $('#selected_type').val(category_type)
                    $('#user_set_id').val(user_set_id);
                    $('#selected_categories_name').val(category_name);

                    $('#selected_assessment').text(counter_selected_assessments);
                    $('#num_of_exercises').text(num_of_exercises); //updated value of num exercises
                    $('#total_number_scenarios').text(num_of_scenarios); //updated value of num scenarios
                    $('#time_required').text((duration)); //updated value of num duration

                } else {
                    counter_selected_assessments++;

                    category_values.push($("#first_category input:hidden").val());
                    category_type.push(first_category_type);
                    category_name.push(first_category_name);

                    num_of_exercises = parseInt($('#num_of_exercises').text()) - data_assessment[first_category].total_number_of_exercises;
                    num_of_scenarios = parseInt($('#total_number_scenarios').text()) - data_assessment[first_category].total_number_of_scenarios.length;
                    duration = parseInt($('#time_required').text()) - data_assessment[first_category].duration;

                    $('#first_category').css("background", "rgb(0,0,0,0)");
                    $('#first_category .category_icons').css("background", "rgb(237,28,36)");
                    $('#selected_categories').val(category_values)
                    $('#selected_type').val(category_type)
                    $('#user_set_id').val(user_set_id);
                    $('#selected_assessment').text(counter_selected_assessments);
                    $('#selected_categories_name').val(category_name);

                    num_of_exercises = parseInt($('#num_of_exercises').text()) + data_assessment[first_category_id].total_number_of_exercises;
                    num_of_scenarios = parseInt($('#total_number_scenarios').text()) + data_assessment[first_category_id].total_number_of_scenarios.length;
                    duration = parseInt($('#time_required').text()) + data_assessment[first_category_id].duration;

                    $('#num_of_exercises').text(num_of_exercises);
                    $('#total_number_scenarios').text(num_of_scenarios);
                    $('#time_required').text((duration));

                    console.log(data_assessment)
                    console.log(data_assessment[first_category_id].duration);

                }
            });
        } else {
            console.log("disabled 1");
        }
});
});

body{
  overflow: hidden;
}

.user_wrapper{
  display: flex;
  height: 100%;
}

.user_menu p{
  font-size: 14px;
  font-style: italic;
}

.user_wrapper .user_menu{
  width: 50%;
  margin: 80px 70px;
  z-index: 1;
}

.user_wrapper .user_menu .rectangle {
  display: flex;
  height: 50px;
  width: 370px;
  background-color: rgb(64,64,64);
  border-radius: 40px 0px 0px 40px;
  text-align: center;
  box-shadow: 0 0 3px 0 #000;
  margin: 10px;
}


.user_wrapper .user_menu .radius_rectangle {
  width: 250px;
  background: #fff;
  border-radius: 40px 0px 0px 40px;
}

.user_wrapper .user_menu .selected_assessement{
  margin: auto;
  width: 40%;
  padding: 0px;
  text-align: left;
  padding-left: 40px;
  color: #fff;
  font-size: 14px;
  font-style: italic;

}

.user_wrapper .user_menu .num_selected_result{
  margin: auto;
  padding: 15px;
  text-align: left;
  padding-left: 30px;
  color: rgb(161,44,48);
  font-size: 14px;
}

.user_wrapper .user_menu .select select{
  width: 340px;
  height: 30px;
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.user_wrapper .user_menu button{
    font-family: 'Montserrat';
    height: 40px;
    width: 230px;
    border-radius: 20px;
    color: #FAFAFA;
    background: rgb(237,28,36);
    font-size: 1em;
    border-color: #FAFAFA;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
  -moz-box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
  box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
}

.user_wrapper .user_menu .btn_width{
  text-align: center;
  width: 350px;
}

.user_wrapper .user_category{
  width:80%;
  background-image: url('');
  background-size: cover;
  background-position: center center;
  margin-top: 0px;
  padding: 0;
}

.user_wrapper .user_category .category_container{
  display: flex;
  height: 100%;
}


.user_wrapper .user_category .category_container .listening_comprehension{
  width: 33.33%;
  height: auto;
  border-right: 1px solid #FAFAFA;
  background-color: rgba(0,0,0,0.5);
}

.user_wrapper .user_category .category_container .reading_comprehension{
  width: 33.33%;
  height: auto;
  border-right: 1px solid #FAFAFA;
  border-left: 1px solid #FAFAFA;
  background-color: rgba(0,0,0,0.5);
}

.user_wrapper .user_category .category_container .grammar_comprehension{
  width: 33.33%;
  height: auto;
  border-left: 1px solid #FAFAFA;
  background-color: rgba(0,0,0,0.5);
}

.user_wrapper .user_category .category_container p{
  font-family: 'Montserrat';
  margin-top: 100px;
  color:#FAFAFA;
  text-align: center;
}

.user_wrapper .user_category .category_container .category_title{
  margin: 0 auto;
  width: 120px;
}

.user_wrapper .user_category .category_container .category_icon_wrapper{
  height: 100px;
  width: 100px;
  margin: 0 auto;
  padding-top:100px;
}


.user_wrapper .user_category .category_container .category_icons{
  background: rgb(242,242,242);
  border-radius: 50%;
  text-align: center;
  color: #FAFAFA;
  vertical-align: middle;
  line-height: 100px;
  width: 100%;
  height: 100px;
  font-size: 2em;
  cursor: pointer;
}

.category_icons img{
  margin-left: 5px;
  vertical-align: middle;
}


/* modal */
.modal_btn_wrapper{
  display: flex;
  padding-top: 30px;
}

.modal_btn_wrapper button{
  font-family: 'Montserrat';
  height: 40px;
  width: 200px;
  border-radius: 20px;
  color: #FAFAFA;
  background: rgb(237,28,36);
  font-size: 1em;
  border-color: #FAFAFA;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
  -moz-box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
  box-shadow: 0px 5px 5px 0px rgba(60, 60, 60, 0.6);
  text-align: center;
  margin: auto;
}

/* end modal */

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<form id="form_user_menu"  method="POST" action="" class="user_wrapper">
     <input type="hidden" id="selected_categories" name="selected_categories" value=""/>
     <input type="hidden" id="selected_type" name="selected_type" value=""/>
     <input type="hidden" id="user_set_id" name="user_set_id" value=""/>
     <input type="hidden" id="selected_categories_name" name="selected_categories_name" value=""/>
   <div class="user_menu">
      <div>
 
      </div>
      <div class="select">
<select name="sets" id="sets_id">
            <option value="" disabled selected>Select Set</option>
                            <option data-category="{&quot;1&quot;:{&quot;total_number_of_scenarios&quot;:[1,2],&quot;total_number_of_exercises&quot;:6,&quot;duration&quot;:360,&quot;topic_type&quot;:1,&quot;user_set_id&quot;:1},&quot;2&quot;:{&quot;total_number_of_scenarios&quot;:[3,4],&quot;total_number_of_exercises&quot;:6,&quot;duration&quot;:360,&quot;topic_type&quot;:1,&quot;user_set_id&quot;:1},&quot;4&quot;:{&quot;total_number_of_scenarios&quot;:[6,7,8,9,10],&quot;total_number_of_exercises&quot;:15,&quot;duration&quot;:900,&quot;topic_type&quot;:1,&quot;user_set_id&quot;:1},&quot;3&quot;:{&quot;total_number_of_exercises&quot;:4,&quot;duration&quot;:200,&quot;topic_type&quot;:2,&quot;user_set_id&quot;:1}}" value="1">Set 1</option>
                            <option data-category="{&quot;1&quot;:{&quot;total_number_of_scenarios&quot;:[5],&quot;total_number_of_exercises&quot;:3,&quot;duration&quot;:180,&quot;topic_type&quot;:1,&quot;user_set_id&quot;:3}}" value="2">Set 2</option>
                     </select>
      </div>
      <div>
       
      </div>
      <div class="rectangle">
         <div class="selected_assessement">
            Selected
         </div>
         <div class="radius_rectangle">
            <div id="selected_assessment" class="num_selected_result">
                            0
            </div>
         </div>
      </div>
      <div class="rectangle">
         <div class="selected_assessement">
            Total Number of Exercises
         </div>
         <div class="radius_rectangle">
            <div id="num_of_exercises" class="num_selected_result">
                            0
            </div>
         </div>
      </div>
      <div class="rectangle">
         <div class="selected_assessement">
            Total Number of Scenarios
         </div>
         <div class="radius_rectangle">
            <div id="total_number_scenarios" class="num_selected_result">
                            0
            </div>
         </div>
      </div>
      <div class="rectangle">
         <div class="selected_assessement">
            Time required to complete
         </div>
         <div class="radius_rectangle">
            <div id="time_required" class="num_selected_result">
                            0
            </div>
         </div>
      </div>
   </div>
   <div class="user_category">
      <div class="category_container">
         <div id="first_category" class="listening_comprehension">
            <div class="category_title">
               <p>Reading</p>
                             <input type="hidden" id="first_category_id" data-category="Reading" value='1'/>
            </div>
            <div class="category_icon_wrapper">
               <div class="category_icons category_1">

               </div>
            </div>
         </div>
      </div>
   </div>
</form>

</body>

</html>

我已经重置了所有变量，但似乎没有重置！任何人都可以看一下它：(。任何帮助将不胜感激。