1

Meu código possui um <script> que deve exibir o nome do fornecedor e o nome do produto em cada <select> utilizando o atributo <title>, só que ao invés disso exibe o valor da chave.

  • Exemplo do erro: Ao invés de exibir Você escolheu o fornecedor Roupas & CIA na legenda criada pelo <title> exibe Você escolheu o fornecedor 1.

Queria entender como mostrar seu nome ao invés de sua chave.

// Script que mostra uma legenda personalizada com o nome do fornecedor e nome do produto em cada <select>, porém está errado aqui.
<script>
        function onChangeSelect(select) {
            document.getElementById("cd_fornecedor").title = "Você escolheu o fornecedor " + select.value;       
            document.getElementById("cd_produto").title = "Você escolheu o produto " + select.value;
        }
    </script>
// Resto do código em PHP
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Cadastrar item de compra</title>
    <link rel="stylesheet" href="/WEB/css/css.css">
</head>
<body>
    <?php  
        require_once '../conexao/conexao.php'; 
        if (isset($_POST['Inserir'])) {
            $cd_fornecedor = $_POST['cd_fornecedor'];
            $cd_produto = $_POST['cd_produto'];
            try {
                $insercao = "INSERT INTO itens_compra_fornecedor (cd_fornecedor,cd_produto,data_compra) 
                VALUES (:cd_fornecedor,:cd_produto,CURRENT_TIMESTAMP())";
                $insere_dados = $conexao->prepare($insercao);
                $insere_dados->bindValue(':cd_fornecedor',$cd_fornecedor);
                $insere_dados->bindValue(':cd_produto',$cd_produto);
                $insere_dados->execute();
            } catch (PDOException $falha_insercao) {
                echo "A insercão não foi feita".$falha_insercao->getMessage();
            }
        }
        $seleciona_fornecedor = $conexao->query("SELECT cd_fornecedor, nome FROM fornecedor");
        $resultado_fornecedor = $seleciona_fornecedor->fetchAll();

        $seleciona_produto = $conexao->query("SELECT cd_produto, nome FROM produto");
        $resultado_produto = $seleciona_produto->fetchAll();
    ?>
    <form method="POST" onsubmit="exibirNome()">
        <p> Fornecedor:
            <select name="cd_fornecedor" id="cd_fornecedor" onchange="onChangeSelect(this)" required="" title="Escolha o fornecedor">
                <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
                <?php
                    foreach ($resultado_fornecedor as $v1) {
                        echo "<option value='{$v1['cd_fornecedor']}'>{$v1['nome']}</option>";
                    }
                ?>
            </select>
        </p>
        <p> Produto:
            <select name="cd_produto" id="cd_produto" required="" title="Escolha a peça de roupa">
                <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
                <?php
                    foreach ($resultado_produto as $v2) {
                        echo "<option value='{$v2['cd_produto']}'>{$v2['nome']}</option>";
                    }
                ?>
            </select>
        </p>
        <button name="Inserir" title="Botão para cadastrar o item de compra"> Cadastrar item de compra </button>
    </form>
</body>
</html>
1
  • @LeoCaracciolo onde ficaria mais ou menos o title no <option>?
    – user198162
    20/07/2020 às 17:03

2 Respostas 2

1

@Vorbbel, esse funciona! Apesar de eu não ter entendido onde você usa isso, deve ser na função que roda ao submeter o formulário onsubmit="exibirNome()" que não postou na pergunta!

function onChangeSelect(obj)
{
/* armazena titulo original */
if(!obj.originalTitle){

   obj.originalTitle = obj.title;

}    

let prependTexto = "Você escolheu";

let textoSelecionado = obj.options[obj.selectedIndex].value != "" ? prependTexto + " " + obj.options[obj.selectedIndex].text : obj.originalTitle;

  
/* mudo o title do select */
obj.title = textoSelecionado;

}
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect(this);" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect(this);" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

3
  • Tem um incoveniente no seu código, quando o <select> ou <input> fica vazio quando é apagado fica a legenda, pois eu alterei obj.title = textoSelecionado; para obj.title = "Você escolheu " + textoSelecionado;
    – user198162
    21/07/2020 às 17:48
  • Ou seja, não volta para o title padrão dos campos.
    – user198162
    21/07/2020 às 17:50
  • Veja se é isso que precisava! 21/07/2020 às 19:20
0

Pode pegar o texto do option dessa maneira options[cd_produto.selectedIndex].text

Exemplo funcional clique em executar após o código

function onChangeSelect()
{
let fornecedor = document.getElementById("cd_fornecedor").options[cd_fornecedor.selectedIndex].text;

let roupa = document.getElementById("cd_produto").options[cd_produto.selectedIndex].text;


   /* #### no seu script tem que ser #######################################

 document.getElementById("cd_fornecedor").title = "Você escolheu o fornecedor " + fornecedor;

 document.getElementById("cd_produto").title = "Você escolheu o produto " + roupa; 

  #####################################################################  */

/* #### esse trecho é só pra exibir no executar ########## */
    if(fornecedor!=""){
       console.log (fornecedor);
    }

    if(roupa!=""){
      console.log (roupa);
   }
/* ####################################################### */

}
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect();" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect();" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

ou dessa maneira (select.options[select.selectedIndex].text)

Exemplo funcional clique em executar após o código

function onChangeSelect1(select) {
  let fornecedor =(select.options[select.selectedIndex].text);
  console.log(fornecedor);
}
function onChangeSelect2(select) {
  let roupa =(select.options[select.selectedIndex].text);
  console.log(roupa);
}
        
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect1(this);" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect2(this);" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

Você deve fazer log-in para responder a esta pergunta.