Não alterar o select uma vez já selecionado

[Richard.Ribeiro 0]

Fala Pessoal.. Bom dia.. uma ajuda por favor.

não sei se e a melhor opção mais, gostaria de criar um id sequencial id="material"

para resolver seguinte problema.. com javascript eu crio select com dados selecionados anteriormente, e crio mais opção no caso de haver mais pedido, porém toda vez que preciso troca a categoria o PRIMEIRO selecte que já possui um item e resetado. como posso resolver isso O PRIMIEIRO SELECT NÃO MUDAR. uma vez que á possui value selected

 

segue todo código:

  <div id="box" >

  <form id="cadastro"  method="post">
    <?php

      if(isset($_POST['acao'])){
        $ide = $_POST['ide'];
        $data = $_POST['data_pedido'];
        $username=$_SESSION['username'];
        $justificativa = $_POST['justificativa'];
        $id_tipo_material = $_POST['material'];
        $qnt_solicitada = $_POST['qnt_solicitada'];

        //cadastrar no banco de dados!
            $gravar = new Painel();

            $id_gsm = $gravar->cadastrarGsm($data,$username,$justificativa,$ide);
            $gravar->cadastrarItem($id_gsm,$id_tipo_material,$qnt_solicitada);
            Painel::alert('sucesso','Pedido realizado com sucesso!');

            }
            $ConsultaIde = ConexaoBD::conectar()->prepare("SELECT  vsat_gilat, 'IDE: '||vsat_gilat|| ', Situação:'|| situacao|| ', Localidade:'||localidade|| ', Logradouro: '||logradouro as local
  FROM vsat WHERE vsat_gilat != '' AND situacao = 'Ativo'");
            $ConsultaIde->execute();
            $ConsultaIde = $ConsultaIde->fetchAll();

  ?>
  <div >
  <div class="form-group">

        <label>Selecione uma IDE</label>
        <select class="ide" name="ide" id="ide" required>
          <option disabled selected>-- Selecione IDE --  </option>
            <?php
            foreach ($ConsultaIde as $key => $value) {
              ?>
              <option value="<?php echo $value['vsat_gilat'];?>">
                <?php echo $value['local'];?>

          </option>
        <?php }?>
        </select>

        <label>Data da Solicitação do Material :</label>
        <input type="text"value="<?php   echo date('d/m/Y');    ?>"  name="data_pedido" readonly >
  </div><!--form-group-->
      <div class="form-group">
        <label>Justificativa do pedido:</label>
        <textarea  rows="8" cols="80" name="justificativa" required></textarea>
  </div><!--form-group-->

  <div class="form-group">
        <label>Selecione Sistema:</label>
        <select name="id_categoria" id="id_categoria">
        <option selected disabled> --- Selecione o Sistema ---</option>
      <?php
  $consulta= ConexaoBD::conectar()->prepare("SELECT id_sistema, descricaos FROM public.cadastrar_sistema");
  $consulta->execute();
  while($row_cat_post = $consulta->fetch(PDO::FETCH_ASSOC) ) {
  echo '<option value="'.$row_cat_post['id_sistema'].'">'.$row_cat_post['descricaos'].'</option>';
        }
  ?>
    </select>
  </div><!--form-group-->

  <div class="form-group">
    <label>Selecione Padrão:</label>
    <span class="carregando">Aguarde, carregando...</span>
    <select name="id_sub_categoria" id="id_sub_categoria" >
      <option value="">--- Selecione o Padrão ---</option>

    </select>
  </div><!--form-group-select-->

  </div>
  <div class="pedido">
    <div class="remover">
    <label>Selecione Material:</label>
    <span class="carregando">Aguarde, carregando...</span>
    <select name="material[]" id="material">
      <option value="">--- Selecionte o Material ---</option>
    </select>
    <input type="text" id="quantidade" name="qnt_solicitada[]" placeholder="Digite a Quantidade" >
<button type="button" name="button" class="removedor">Remover Item</button>
</div>
</div>

</div>
  <button type="button" name="button" class="clonador">Novo Item</button>

  <input type="submit" name="acao" value="Cadastrar!">
  </form>

 

 

 

 

 

 

 

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript">
            google.load("jquery", "1.4.2");
          </script>

<script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

  $(function(){
    $('#id_categoria').change(function(){

      if( $(this).val() ) {
        $('#id_sub_categoria').hide();
        $('.carregando').show();

        $.get('sub_categorias_post?search=',{id_categoria: $(this).val(), ajax: 'true'}, function(j){
          html = $.parseHTML(j);
          j=JSON.parse(html[16].textContent.trim());

          var options = '<option value="">Escolha Subcategoria</option>';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>';
          }
          $('#id_sub_categoria').html(options).show();
          $('.carregando').hide();
        });
      } else {
        $('#id_sub_categoria').html('<option value="">– Escolha Subcategoria –</option>');
      }
    });
  });

  $(function(){
    $('#id_sub_categoria').change(function(){
      if( $(this).val() ) {
        $('#material').hide();
        $('.carregando').show();
        $.get('sub_categorias_post2?search=',{id_sub_categoria: $(this).val(), ajax: 'true'}, function(j){
          html = $.parseHTML(j);
          console.log(html);
          j=JSON.parse(html[16].textContent.trim());
          var options = '<option value="">Escolha Subcategoria</option>';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>';
          }
          $('#material').html(options).show();
          $('.carregando').hide();
        });
      } else {
        $('#id_sub_categoria2').html('<option value="">– Escolha Subcategoria –</option>');
      }
    });
  });
  </script>
  <script>
  $(document).ready(function(){

 

        $(document).on('click', '.clonador', function(e){
          var elm_html = $('.pedido').html();
          var counter = 0;  //faz uma cópia dos elementos a serem clonados.
            e.preventDefault();

            var elementos = elm_html.replace(/\[[0\]]\]/g, '['+ counter +']');  //substitui o valor dos index e incrementa++
            counter++;
            $('#cadastro').append(elementos);  //exibe o clone.
        });

    });

    $(document).on('click', '.removedor', function (event) {
      event.preventDefault();
      $(this).parents('.remover').remove(); // navega até o pai com a classe pedido e remove ele inteiro
    });
  </script>

 

  <?php
  die();
  ?>
</div><!--box-content-->