Javascript overwriting class css

Question

When using a javascript function in two populated selects, it overrides the css by hiding its values and assigning another class, as shown below:

Before using the function:

By clicking the first select and choosing an option:

Inspecting the element in the browser:

He assigned the display: none and used other css classes to make this mess. When using css to assign display: visible !important it reappears but shows two selects:

I can’t seem to solve:

If necessary I leave the javascript code here!

Javascript code:

$(document).ready(function() {

    $(".select1").change(function() {
        var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
        var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

        var valor = $(this).val();
        var select = $(this).closest("tr").find(".select2"); // busca o select2 da mesma linha

        if (valor == "") {
            select
            .html("")
            .append("<option value=''> Selecione </option>");

        } else if (valor == "<?php echo $class_id_to;?>") {
            select.html("");

            for(var i = 0; i < proxima_turma.length; ++i) {
                select.append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
            }                  


        } else if (valor == "<?php echo $class_id_from; ?>") {

            select.html("");

            for(var i = 0; i < antiga_turma.length; ++i) {
                select.append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
            }
        }
    });

});

Select code:

<select <?php if ((($transferidos != null) && ($evadidos != null)) OR (($transferidos != null) || ($evadidos != null))) ?>
class="form-control selectboxit select2" <?php if (!$disableSelect) { ?>
name="promotion_status2_<?php echo $row['student_id'];?>" style="width: 40px;"
<?php } ?> >
<?php if ((($transferidos != null) && ($evadidos != null)) OR (($transferidos 
 != null) || ($evadidos != null))) { ?>
 <option value="null" selected></option>
 <?php }else{ 
?>
<option value="">selecione</option>                             
</select>

Answer 1

For appearance and class .selectboxit you are using a plugin called Selectboxit, and it has its own method to select by adding new options. If you add options directly in select without calling the method .add() plugin, will not do any effect, because the original select is hidden by the plugin and created a custom pseudo-select instead.

To remove all options you use:

select.data("selectBox-selectBoxIt").remove();

To add new ones, after the .append, you use:

select.data("selectBox-selectBoxIt").add();

Your code will look like this:

$(document).ready(function() {

    $(".select1").change(function() {
        var proxima_turma = <?php echo json_encode($proxima_turma); ?>;
        var antiga_turma = <?php echo json_encode($antiga_turma); ?>;

        var valor = $(this).val();
        var select = $(this).closest("tr").find(".select2"); // busca o select2 da mesma linha

         var box = select.data("selectBox-selectBoxIt");
         box.remove();

        if (valor == "") {
            select.append("<option value=''> Selecione </option>");
        } else if (valor == "<?php echo $class_id_to;?>") {
            for(var i = 0; i < proxima_turma.length; ++i) {
                select.append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
            }                  
        } else if (valor == "<?php echo $class_id_from; ?>") {
            for(var i = 0; i < antiga_turma.length; ++i) {
                select.append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
            }
        }

        box.add();
    });

});

See in operation:

$(document).ready(function() {

   $(".select2").selectBoxIt();

    $(".select1").change(function() {
        var proxima_turma = [{"section_id": 11, "name": "Maneta"},{"section_id": 12, "name": "Baqueta"}];
        var antiga_turma = [{"section_id": 13, "name": "Guimeta"},{"section_id": 14, "name": "Fusqueta"}];

        var valor = $(this).val();
        var select = $(this).closest("tr").find(".select2"); // busca o select2 da mesma linha

         var box = select.data("selectBox-selectBoxIt");
         box.remove();

        if (valor == "") {
            select
            .append("<option value=''> Selecione </option>");

        } else if (valor == 1) {

            for(var i = 0; i < proxima_turma.length; ++i) {
                select.append("<option value='" + proxima_turma[i]['section_id'] + "'>" + proxima_turma[i]['name'] + "</option>");
            }                  


        } else if (valor == 2) {


            for(var i = 0; i < antiga_turma.length; ++i) {
                select.append("<option value='" + antiga_turma[i]['section_id'] + "'>" + antiga_turma[i]['name'] + "</option>");
            }
        }
        
        box.add();
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
<table border="1">
   <tr>
      <td>
         <select class="select1">
            <option value="">Selecione...</option>
            <option value="1">1</option>
            <option value="2">2</option>
         </select>
      </td>
      <td>
         <select class="form-control selectboxit select2">
            <option value=''> Selecione </option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select class="select1">
            <option value="">Selecione...</option>
            <option value="1">1</option>
            <option value="2">2</option>
         </select>
      </td>
      <td>
         <select class="form-control selectboxit select2">
            <option value=''> Selecione </option>
         </select>
      </td>
   </tr>
</table>