Question

我有一个系统，用户可以在其中注册以下信息：

我需要用户选择一个网格（等级），以仅显示与所选网格有关的信息。此信息来自数据库。

HTML代码：

<table width="100%" >
    <tr class="linhas">
    <td>
    <table class="table table-bordered">
    <tr>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>
            <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>
        </tr>
    <tr>
        <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>
        <td style="text-align: center; width: 30%">
        <select name="CoresBasicas" class="form-control">
        <?php echo $metodos->comboCores($key); ?>
        </select>       
        </td>
        <td style="text-align: left;">
            <select name="Grade" class="form-control" style="width: 100%">
            <?php echo $metodos->comboGrades(); ?>
            </select>
        </td>
        </tr>
        <tr>
        <td colspan="3">
        <table class="table table-bordered">
        <tr>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Tamanho</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Quantidade</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">EAN</td>
        </tr>
        <?php echo $metodos->listarTamanhos(); ?>
        </table>        
    </td>
    </tr>
    <tr>
    <td colspan="3" class="text-left">    
    <label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
    <input id='files' type='file' name="Fotos[]" multiple>
    </td>
</table>
    </td>
<td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
</tr>              
<tr><td colspan="3" class="text-right">
<button type="button" class="adicionarCampo btn btn-success" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Incluir nova cor</button>
</div>

</td></tr>
</table>

网格方法的PHP代码：

public function comboGrades($key)
    {
        $sqlMostrar = mysqli_query($this->conexao, "SELECT * FROM loja_grades;");
        if (mysqli_num_rows($sqlMostrar) == 0) 
        {
            $mostrar = "<div style='color: red'>Nenhuma grade cadastrado até o momento.</div>";
        } 
         else 
        {
            $mostrar = "<select name='Classes' class='form-control select2' multiple=\"multiple\" style='width: 35%'>";
            $mostrar = "<option value=''>Selecione a grade</option>";
            while ($jmMostrar = mysqli_fetch_object($sqlMostrar)) 
            {
                //$selected = ($key == $jmMostrar->IDCategorias)?("selected"):(null);
                $mostrar .= "<option value='".$jmMostrar->IdGrades."' ".$selected.">".$jmMostrar->Grades."</option>";
            }
         $mostrar .= "</select>";   
        }
        return $mostrar;
    }

我拥有的Jquery代码是这样：

<script type="text/javascript">
$(function () {
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    //novoCampo.find("input").val("");
    novoCampo.find('input[type="text"]').val("");
    novoCampo.find('select').val("");
    //novoCampo.find('input[type="radio"]').prop('selected', false);
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
</script>

对不起，我的英语。

Answer 1

我设法从一位西班牙同事那里解决了这个问题。

$(document).on('change', '.grades', function() {
  var sel = $(this);
  $.ajax({
    type:'post',
    dataType: 'json',
    url: 'visualizar.php?v=' + sel.find('option:selected').val(),
    success: function(dados) {
      for(var i = 0; dados.length > i; i++) {
        sel.closest('TR').next().find('.mostrarGrades').html(dados[i]);          
      }
    }
  });
});

选择选择选项后显示来自数据库的数据

1 个答案: