-2
I have a select
which is assembled via database query.
<?php
$tl_rel = "";
$arg = array("select"=>"*","tabela"=>"TAB_RELATORIOS","where"=>"where login='{$_SESSION['login']}'");
$obj_rel = $obj_pdo->getConsulta($arg);
$tl_rel = count($obj_rel);
?>
<div class="form-row">
<div class="form-group col-md-4">
<label class="control-label" for="opcoes">Relatórios Salvos</label>
<select class="custom-select" id="opcoes" name="opcoes" onclick="mostra(this);">
<option value="0" selected>Selectione</option>
<?php
for($i=0; $i < $tl_rel; $i++){
print "<option value='{$obj_rel[$i]->TABELAS}'>{$obj_rel[$i]->NOME}</option>";
}
?>
I need to get the text from option
user selected to mount a second select
, also via database.
I tried to do this via Ajax through the code below, but it displayed the whole HTML in the console.
function mostra(lista){
var x = lista.options[lista.options.selectedIndex];
var nome = x.text;
if(lista.value != "0"){
$("#Lista2").prop("hidden", true);
$.ajax({
type: 'POST',
url: 'relatorios.php',
cache: false,
data: { 'tabela': nome },
success: function(retorno){
alert(retorno);
}
});
}else{
$("#Lista2").prop("hidden", false);
}
}
There is a way to do this, without me having to display all the HTML as an answer?
This is all the code.
<!doctype html>
<html lang="pt-br">
<head>
<title>Relatório de Follow Up Honda</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="relatorio" content="relatorio_prof_honda">
<link rel="shortcut icon" href="../imagens/logo-pequeno.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body { background-image: url("../imagens/fundo.png"); }
* { box-sizing: border-box; font-size: 10pt; }
.corpo { width: 45%; height: 320px; margin: 150px auto auto 100px; padding: 5px; }
.dropdown-item:hover{ color:#fff; text-decoration:none; background-color:#28a745; border-color:#28a745 }
li { width: 90px; text-align: center; }
li:hover { border-bottom: 1px solid #fff; }
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="../java/jquery.selectlistactions.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0,0,0,0.8)">
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="novo.php">Novo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="protocolo.php">Protocolo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="relatorios.php">Relatórios</a>
</li>
</ul>
</div>
</nav>
<form action="" method="post" name="form" id="form" target="_blank">
<div class="corpo">
<div class="form-row">
<div class="form-group col-md-5">
<label for="dt_ini">De</label>
<input type="date" class="form-control" id="dt_ini" name="dt_ini" required autofocus />
</div>
<div class="form-group col-md-2">
<label for=""> </label>
</div>
<div class="form-group col-md-5">
<label for="dt_fim">Até</label>
<input type="date" class="form-control" id="dt_fim" name="dt_fim" value="<?php print date('Y-m-d'); ?>" required />
</div>
</div>
<?php
$tl_rel = "";
$arg = array("select"=>"*","tabela"=>"TAB_RELATORIOS","where"=>"where login='{$_SESSION['login']}'");
$obj_rel = $obj_pdo->getConsultaDI($arg);
//var_dump($obj_rel);
$tl_rel = count($obj_rel);
?>
<div class="form-row">
<div class="form-group col-md-4">
<label class="control-label" for="opcoes">Relatórios Salvos</label>
<select class="custom-select" id="opcoes" name="opcoes" onclick="mostra(this);" onChange="DesmarcarOp();SelecaoRelatorio();">
<option value="0" selected>Selectione</option>
<?php
for($i=0; $i < $tl_rel; $i++){
print "<option value='{$obj_rel[$i]->TABELAS}'>{$obj_rel[$i]->NOME}</option>";
}
?>
</select>
</div>
<div class="form-group col-md-4">
<label for="novo_relatorio">Novo Relatório</label>
<input type="text" class="form-control" id="novo_relatorio" name="novo_relatorio" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for=""> </label>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="salvarrelatorio">
<label class="custom-control-label" for="salvarrelatorio">Salvar Relatório?</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dipendentes" value="dipendentes">
<label class="form-check-label" for="dipendentes">DI's Pendentes</label>
</div>
</div>
<div class="form-group col-md-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="registradas" value="registradas">
<label class="form-check-label" for="registradas">DI's Registradas</label>
</div>
</div>
<div class="form-group col-md-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="entregues" value="entregues">
<label class="form-check-label" for="entregues">DI's Entregues</label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label class="control-label" for="Lista1">Disponíveis</label>
<select multiple class="custom-select" id="Lista1">
<option value="idt_embarque">IDENTIFICACAO</option>
<option value="invoice">NR INVOICE</option>
<option value="nr_doc_carga_mast">NR MASTER</option>
<option value="nr_doc_carga">NR HOUSE</option>
<option value="dt_di">DATA D.I.</option>
<option value="nr_di">NR D.I.</option>
<option value="qtd_adicoes">NR ADICOES</option>
<option value="historico">HISTORICO</option>
</select>
</div>
<div class="form-group col-md-2">
<label class="control-label" for="btnAdd"> </label>
<button id="btnAdd" type="button" class="btn btn-outline-success" style="width:25px;height:25px;margin:55px 0 0 25px">
<svg style="margin:-10px 0 0 -6px" width="15" height="15" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-right" class="svg-inline--fa fa-angle-double-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>
</button>
</div>
<script>
function mostra(lista){
var x = lista.options[lista.options.selectedIndex];
var nome = x.text;
if(lista.value != "0"){
$("#Lista2").prop("hidden", true);
$.ajax({
type: 'POST',
url: 'relatorios.php',
cache: false,
data: { 'tabela': nome },
success: function(retorno){
alert(retorno);
}
});
}else{
$("#Lista2").prop("hidden", false);
}
}
</script>
<div class="form-group col-md-5">
<label class="control-label" for="Lista2">Itens Rel.</label>
<select multiple class="form-control" id="Lista2" name="Lista2[]">
<option hidden selected value="cd_processo"></option>
<option hidden selected value="dt_recebimento_doc"></option>
<option value="idt_embarque">IDENTIFICACAO</option>
<option value="invoice">NR INVOICE</option>
</select>
</div>
<?php
//var_dump($_POST);
@$tabela = $_POST['tabela'];
$opcoes = "";
$cabeca = "";
$campo = array("/idt_embarque/i","/invoice/i","/nr_doc_carga_mast/i","/nr_doc_carga/i","/dt_di/i","/nr_di/i","/qtd_adicoes/i","/historico/i");
$titulo = array("IDENTIFICACAO","NR INVOICE","NR MASTER","NR HOUSE","DATA D.I.","NR D.I.","NR ADICOES","HISTORICO");
$arg = array("select"=>"*","tabela"=>"TAB_RELATORIOS","where"=>"where login='{$_SESSION['login']}' and nome='{$tabela}'");
$obj_rel = $obj_pdo->getConsultaDI($arg);
if(!empty($obj_rel)){
$opcoes = explode("|",$obj_rel[0]->OPCOES);
$tl_rel = count($opcoes)-1;
print '<div class="form-group col-md-5">';
print '<label class="control-label" for="Lista2">Itens Rel.</label>';
print '<select multiple class="form-control" id="Lista2" name="Lista2[]">';
for($i=0; $tl_rel > $i; $i++){ //inicio do for
$cabeca = preg_replace($campo, $titulo, $opcoes[$i]);
if($opcoes[$i] === "cd_processo"){
print '<option hidden selected value="cd_processo"></option>';
}elseif($opcoes[$i] === "dt_recebimento_doc"){
print '<option hidden selected value="dt_recebimento_doc"></option>';
}else{
print '<option value="'.$opcoes[$i].'">'.$cabeca.'</option>';
}
}// fim do for
print '</select>';
print '</div>';
}
?>
</div>
<div class="form-row">
<div class="form-group col-md-5">
</div>
<div class="form-group col-md-2">
</div>
<div class="form-group col-md-5">
<button type="button" class="btn btn-sm" id="btnUp">
<svg width="20px" height="20px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-up" class="svg-inline--fa fa-arrow-alt-circle-up fa-w-16 text-success" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm292 116V256h70.9c10.7 0 16.1-13 8.5-20.5L264.5 121.2c-4.7-4.7-12.2-4.7-16.9 0l-115 114.3c-7.6 7.6-2.2 20.5 8.5 20.5H212v116c0 6.6 5.4 12 12 12h64c6.6 0 12-5.4 12-12z"></path></svg>
</button>
<button type="button" class="btn btn-sm" id="btnDown">
<svg width="20px" height="20px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-down" class="svg-inline--fa fa-arrow-alt-circle-down fa-w-16 text-success" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z"></path></svg>
</button>
<button type="button" class="btn btn-sm" id="btnRemove">
<svg width="20px" height="20px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16 text-success" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
</button>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<div class="btn-group" role="group">
<button id="consultar" type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
VISUALIZAR
</button>
<div class="dropdown-menu" aria-labelledby="consultar">
<button type="submit" class="dropdown-item" name="tela">
<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tv" class="svg-inline--fa fa-tv fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M592 0H48A48 48 0 0 0 0 48v320a48 48 0 0 0 48 48h240v32H112a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H352v-32h240a48 48 0 0 0 48-48V48a48 48 0 0 0-48-48zm-16 352H64V64h512z"></path></svg>
Tela</button>
<button type="submit" class="dropdown-item" name="excel">
<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-excel" class="svg-inline--fa fa-file-excel fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm212-240h-28.8c-4.4 0-8.4 2.4-10.5 6.3-18 33.1-22.2 42.4-28.6 57.7-13.9-29.1-6.9-17.3-28.6-57.7-2.1-3.9-6.2-6.3-10.6-6.3H124c-9.3 0-15 10-10.4 18l46.3 78-46.3 78c-4.7 8 1.1 18 10.4 18h28.9c4.4 0 8.4-2.4 10.5-6.3 21.7-40 23-45 28.6-57.7 14.9 30.2 5.9 15.9 28.6 57.7 2.1 3.9 6.2 6.3 10.6 6.3H260c9.3 0 15-10 10.4-18L224 320c.7-1.1 30.3-50.5 46.3-78 4.7-8-1.1-18-10.3-18z"></path></svg>
Excel</button>
<button type="submit" class="dropdown-item" name="pdf">
<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-pdf" class="svg-inline--fa fa-file-pdf fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm250.2-143.7c-12.2-12-47-8.7-64.4-6.5-17.2-10.5-28.7-25-36.8-46.3 3.9-16.1 10.1-40.6 5.4-56-4.2-26.2-37.8-23.6-42.6-5.9-4.4 16.1-.4 38.5 7 67.1-10 23.9-24.9 56-35.4 74.4-20 10.3-47 26.2-51 46.2-3.3 15.8 26 55.2 76.1-31.2 22.4-7.4 46.8-16.5 68.4-20.1 18.9 10.2 41 17 55.8 17 25.5 0 28-28.2 17.5-38.7zm-198.1 77.8c5.1-13.7 24.5-29.5 30.4-35-19 30.3-30.4 35.7-30.4 35zm81.6-190.6c7.4 0 6.7 32.1 1.8 40.8-4.4-13.9-4.3-40.8-1.8-40.8zm-24.4 136.6c9.7-16.9 18-37 24.7-54.7 8.3 15.1 18.9 27.2 30.1 35.5-20.8 4.3-38.9 13.1-54.8 19.2zm131.6-5s-5 6-37.3-7.8c35.1-2.6 40.9 5.4 37.3 7.8z"></path></svg>
PDF</button>
</div>
</div>
<!-- <input type="submit" class="btn btn-outline-success" id="consultar" name="consultar" value="CONSULTAR" /> -->
</div>
</div>
</div>
</form>
<script>
$('#btnAdd').click(function (e) {
$('select').moveToList('#Lista1', '#Lista2');
e.preventDefault();
});
$('#btnRemove').click(function (e) {
$('select').removeSelected('#Lista2');
e.preventDefault();
});
$('#btnUp').click(function (e) {
$('select').moveUpDown('#Lista2', true, false);
e.preventDefault();
});
$('#btnDown').click(function (e) {
$('select').moveUpDown('#Lista2', false, true);
e.preventDefault();
});
</script>
</body>
</html>
You display what you choose to display. If you call a page that responds to the whole HTML and put it to display the whole HTML, it will display the whole HTML. Detail your code better. This code snippet (javascript) that you put up does not match the result that you detailed. " display all HTML in the console" but what ta in the code is to give a whole code Alert.
– Fabricio
@Fabricio I will post all the code, maybe it is clearer. But in short what I want is, use the text displayed in the first
select
A to create a secondselect
B.– Tony Anderson