Jump to content
Artes Ussler

Editar registro com menu select

Recommended Posts

Boa tarde

 

Achei um código na web que permite definir quais itens que aparecem em um menu select através do que é selecionado em outro menu select. Seria como na imagem:

select.png.2ce0d407110245d315ff5827beb58f3b.png

 

Eis o código completo e funcionando:

<form method="post" action="">
    <select name="categoria" id="sel1" onchange="giveSelection(this.value)">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
    </select>

    <select name="subcategoria" id="sel2">
        <option data-option="1" value="1">Subitem 1</option>
        <option data-option="1" value="2">Subitem 2</option>
        <option data-option="2" value="3">Subitem 3</option>
        <option data-option="2" value="4">Subitem 4</option>
        <option data-option="3" value="5">Subitem 5</option>
        <option data-option="3" value="6">Subitem 6</option>
    </select>
</form>
<script type="text/javascript">
    var sel1 = document.querySelector('#sel1');
    var sel2 = document.querySelector('#sel2');
    var options2 = sel2.querySelectorAll('option');

    function giveSelection(selValue) {
        sel2.innerHTML = '';
        for (var i = 0; i < options2.length; i++) {
            if (options2[i].dataset.option === selValue) {
                sel2.appendChild(options2[i]);
            }
        }
    }
    giveSelection(sel1.value);
</script>

Testei este código em um sistema de cadastro de produtos, e funciona muito bem. Esse sistema também possui uma página para a edição dos dados destes produtos, e é aí que surgiu o problema.

Ao abrir a página de edição, eu uso esse mesmo código select , mas acrescento nele selected="selected" para então exibir o item correspondente ao produto editado.

O problema está no segundo select, que ao invés de imediatamente mostrar o subitem correspondente ao que está marcado no primeiro select, ele mostra sempre o último subitem da lista.

 

Não sei se conseguiram entender tudo isso, mas se alguém puder ajudar, fico grato.

Share this post


Link to post
Share on other sites

Bom dia!

 

Gostaria de rever essa dúvida que postei em abril desse ano. Faz tempo, mas ainda estou precisando disso.


Será que alguém sabe como me ajudar a resolver? Eu já tentei, sério, mas infelizmente sem sucesso.

Share this post


Link to post
Share on other sites

Deixa eu ver se entendi....

O seletor "categoria"  tem lá suas opções, mas o seletor "subcategoria" não.

Ao alterar "categoria" obtemos seu value, então "subcategoria" terá as opções correspondentes ao atributo "data"

Resumo: "seletor" no valor for 1, as opções  de "subcategoria" só vão existir as que forem data-option="1"

É isso?

 

Se for, de onde e como vão ser as opções do segundo seletor?

Porque essas opções devem ser criadas e injetadas dentro do segundo seletor, mas criar-las com qual informação?

Share this post


Link to post
Share on other sites
1 hora atrás, Omar~ disse:

Resumo: "seletor" no valor for 1, as opções  de "subcategoria" só vão existir as que forem data-option="1"

É isso?

Correto, mas no processo de CADASTRO do item, como mencionei, funciona perfeitamente. Minha dificuldade está no processo de EDIÇÃO do registro.

 

Vamos supor a situação: eu fiz um cadastro usando ITEM 2 (categoria) e o SUBITEM 4 (subcategoria). No momento que abro a página de edição desse registro, no menu de categoria deverá aparecer então o ITEM 2 selecionado (o qual consegui fazer) e no menu das subcategorias deveria aparecer então o SUBITEM 4 selecionado, mas acaba aparecendo como selecionado o item 1 e todos os demais itens da lista.

 

Fiz uma representação abaixo:

 menus.png.a3d5e3259077bf21cb85f9177c4201a6.png

Share this post


Link to post
Share on other sites

Como eu disse:

- De onde vem a informação da sub-categoria e como isso é obtido?

Pois bem, independente dessa minha pergunta, qualquer dados deve está presente o javascript para que quando alterar o valor de categoria temos algo para preencher as subcategorias.

Optei por um JSON com os dados para subcategoria, onde apenas tenho um índice para saber que sub-categoria pertence a cada categoria.

Usei o PHP, para criar o json, mas a abordagem fica só com o javascript mesmo.

No mais o exemplo eu escrevi em cada linha o que é feito (espero que seja algo como isso)

Spoiler

<?php
$categorias = [
    ['id' => 1, 'nome' => 'Categoria 1'],
    ['id' => 2, 'nome' => 'Categoria 2'],
    ['id' => 3, 'nome' => 'Categoria 3'],
    ['id' => 4, 'nome' => 'Categoria 4']
];
$subcategoria = [
    ['id' => 1, 'relacao' => 1, 'nome' => 'Sub-Categoria 1'],
    ['id' => 2, 'relacao' => 1, 'nome' => 'Sub-Categoria 2'],
    ['id' => 3, 'relacao' => 2, 'nome' => 'Sub-Categoria 3'],
    ['id' => 4, 'relacao' => 2, 'nome' => 'Sub-Categoria 4'],
    ['id' => 5, 'relacao' => 3, 'nome' => 'Sub-Categoria 5'],
    ['id' => 6, 'relacao' => 3, 'nome' => 'Sub-Categoria 6'],
    ['id' => 7, 'relacao' => 4, 'nome' => 'Sub-Categoria 7'],
    ['id' => 8, 'relacao' => 4, 'nome' => 'Sub-Categoria 8'],
    ['id' => 9, 'relacao' => 4, 'nome' => 'Sub-Categoria 9'],
    ['id' => 10, 'relacao' => 4, 'nome' => 'Sub-Categoria 10']
];
$dados = json_encode($subcategoria);
?>

<select name="categoria" id="categoria">
    <option value="">Selecione a Categoria...</option>
    <?php
    foreach ($categorias as $value) {
        echo ("<option value=\"{$value['id']}\">{$value['nome']}</option>");
    }
    ?>
</select>

<select name="subcategoria" id="subcategoria"></select>

<script>
    var valoresEmJson = JSON.parse('<?= $dados ?>'), // Então aqui eu tenho o JSON com todas sub-categorias
        categoria = document.getElementById('categoria'),
        subcategoria = document.getElementById('subcategoria');

    function subValor(e) {
        var valor = e.target.value; // Obtenho o valor da "categoria"
        if (valor) { // Vejo se "categoria" tem mesmo algum valor
            removeOpcao(); // Primeiro limpar todas opções inseridas
            valoresEmJson.forEach(function (indice) { // Pecorro o JSON
                if (indice.relacao == valor) { // Quando a relação dos índices em "subcategoria" for igual ao valor selecionado
                    // Mando criar novas opções em "subcategoria"
                    // Enviando como parâmetro o id e o nome, no índice do JSON
                    criarOpcao(indice.id, indice.nome);
                }
            });
        }
    }

    function removeOpcao() { // Apenas limpa as opções do seletor "subcategoria"
        while (subcategoria.childNodes.length) {
            subcategoria.removeChild(subcategoria.firstChild);
        }
    }

    function criarOpcao(id, nome) {
        var novoOption = document.createElement('option'); // Crio a tag <option>
        novoOption.value = id; // Seu valor é o "id" do índice obtido por parâmetro
        novoOption.innerText = nome; // O texto é o nome do índice obtido por parâmetro
        subcategoria.appendChild(novoOption); // Anexo a opção dentro do seletor subcategoria
    }

    categoria.addEventListener('change', subValor, false); // Quando o seletor categoria é alterado

    if (categoria.selectedIndex) { // Se algum valor no seletor "categoria" estiver como a propriedade "selected"
        var evento = new Event('change'); // Crio o evento "change"
        categoria.dispatchEvent(evento); // Despacho o evento sem mesmo o usuário alterar o seletor
    }
</script>

 

Note que a categoria 4 possui 4 sub categorias e as demais somente 2, pois o que interessa é saber a relação, pois é isso de determina a qual categoria um sub pertence.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By daviassumpcao
      Pessoal... há valores em um JSON sendo exibidos por um JS (imagem anexo)... preciso verificar se um valor "x" está em um determinado nó do JSON. E a partir daí exibir uma div.... marquei na imagem com um círculo rosa qual valor quero verificar porém meu script não funciona... material de estudo. É possível fazer isso acontecer?
       
      JS
      const jsonCat = vtxctx.categoryId; const catProd = JSON.parse(jsonCat); var divProd = document.getElementById('faq-connect'); if (catProd.categoryId == 10103) { divProd.style.display = 'block'; } else{ divProd.style.display = 'none'; } HTML para exibir uma DIV em caso positivo
      <div class="faq-connect" style="display:none"> <p>Sucesso!</p> </div>  
       

    • By paulinhosupriano
      Bom dia a todos!
       
      Gente, tenho uma dúvida!
       
      Muitos desenvolvedores utilizam o framework nodejs com express para trabalhar com API e também estão utilizando o ADONISJS.
      Minha duvida seria, em alguns projetos devemos criar configurações onde o usuário cliente não poderá ter acesso a visualização dos dados public de constantes de configuração, url ou banco. 
      Como protejo essas informações?
      Muitas dizem que seria o arquivo .env. 
       
      Como protegerei essas informações? 
      Exemplo firabase como proteger os dados token etc.
       
      Poderiam informar tutorial, curso, vídeo algo a respeito do assunto? 
       
      Agradecido!
       
    • By violin101
      Caros amigos, saudações...
       
      Estou com uma dúvida de dados vindo do MySql, para preencher Tabela via AJAX.
       
      Como faço para formatar o CAMPO no formato MOEDA, ou seja:
      o campo vem.: 12.00
      formatar para: 12,00
       
      o código está assim:
      function montaTable(cep){ $.ajax({ url: "<?php echo base_url();?>site/produtos/getByCep", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //Remove Mensagem da Tabela $("#tborden tbody tr.message").remove(); var cols = ""; for (var i = 0; i < data.length; i++) { cols += "<tr>"; cols += "<td>" + data[i].cepRegiao + "</td>"; cols += "<td>" + data[i].frtEntreg + "</td>"; cols += "<td>" + data[i].vlrFrete + "</td>"; //<--como formatar esse campo cols += "</tr>"; } //Atualiza a Tabela $("#tborden tbody").empty(); //Adiciona os Itens a Tabela $("#tborden tbody").append(cols); } });//Fim - ajax Valor Frete }

      Grato,
       
      Cesar
    • By Rodrigo5468
      Olá, tudo bem? Espero que sim.
       
      Eu seguir esse tutorial e essa atualização para conseguir o código final. Mas o meu site fica totalmente, não exibe absolutamente nada. Eu venho aqui recorrer a vocês, pois lá não irei ter nenhum tipo de suporte. Por favor, quem for me auxiliar com esse pequeno problema, leia o tópico do tutorial. Mas o Fruition é um script para personalizar o domínio utilizando o Notion.
      /* CONFIGURATION STARTS HERE */ /* Step 1: enter your domain name like fruitionsite.com */ const MY_DOMAIN = 'DOMINIO'; /* * Step 2: enter your URL slug to page ID mapping * The key on the left is the slug (without the slash) * The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'CODIGO_DA_PÁGINA_PÚBLICA_DO_NOTION' }; /* Step 3: enter your page title and description for SEO purposes */ const PAGE_TITLE = ''; const PAGE_DESCRIPTION = ''; /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */ const GOOGLE_FONT = ''; /* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */ const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); addEventListener("fetch", event => { event.respondWith(fetchAndApply(event.request)); }); function generateSitemap() { let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'; slugs.forEach( (slug) => (sitemap += "<url><loc>https://" + MY_DOMAIN + "/" + slug + "</loc></url>") ); sitemap += "</urlset>"; return sitemap; } const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type" }; function handleOptions(request) { if ( request.headers.get("Origin") !== null && request.headers.get("Access-Control-Request-Method") !== null && request.headers.get("Access-Control-Request-Headers") !== null ) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { Allow: "GET, HEAD, POST, PUT, OPTIONS" } }); } } async function fetchAndApply(request) { if (request.method === "OPTIONS") { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === "/robots.txt") { return new Response("Sitemap: https://" + MY_DOMAIN + "/sitemap.xml"); } if (url.pathname === "/sitemap.xml") { let response = new Response(generateSitemap()); response.headers.set("content-type", "application/xml"); return response; } let response; if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) { response = await fetch(url.toString()); let body = await response.text(); response = new Response( body .replace(/www.notion.so/g, MY_DOMAIN) .replace(/notion.so/g, MY_DOMAIN), response ); response.headers.set("Content-Type", "application/x-javascript"); return response; } else if (url.pathname.startsWith("/api")) { // Forward API response = await fetch(url.toString(), { body: request.body, headers: { "content-type": "application/json;charset=UTF-8", "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" }, method: "POST" }); response = new Response(response.body, response); response.headers.set("Access-Control-Allow-Origin", "*"); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; return Response.redirect("https://" + MY_DOMAIN + "/" + pageId, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method }); response = new Response(response.body, response); response.headers.delete("Content-Security-Policy"); response.headers.delete("X-Content-Security-Policy"); } return appendJavascript(response, SLUG_TO_PAGE); } class MetaRewriter { element(element) { if (PAGE_TITLE !== "") { if ( element.getAttribute("property") === "og:title" || element.getAttribute("name") === "twitter:title" ) { element.setAttribute("content", PAGE_TITLE); } if (element.tagName === "title") { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== "") { if ( element.getAttribute("name") === "description" || element.getAttribute("property") === "og:description" || element.getAttribute("name") === "twitter:description" ) { element.setAttribute("content", PAGE_DESCRIPTION); } } if ( element.getAttribute("property") === "og:url" || element.getAttribute("name") === "twitter:url" ) { element.setAttribute("content", MY_DOMAIN); } if (element.getAttribute("name") === "apple-itunes-app") { element.remove(); } } } class HeadRewriter { element(element) { if (GOOGLE_FONT !== "") { element.append( `<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap' rel='stylesheet'> <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, { html: true } ); } element.append( `<style> div.notion-topbar > div > div:nth-child(3) { display: none !important; } div.notion-topbar > div > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(5) { display: none !important; } div.notion-topbar > div > div:nth-child(6) { display: none !important; } div.notion-topbar-mobile > div:nth-child(3) { display: none !important; } div.notion-topbar-mobile > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; } div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; } </style>`, { html: true } ); } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append( `<script> const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)}; const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; const el = document.createElement('div'); let redirected = false; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); function getPage() { return location.pathname.slice(-32); } function getSlug() { return location.pathname.slice(1); } function updateSlug() { const slug = PAGE_TO_SLUG[getPage()]; if (slug != null) { history.replaceState(history.state, '', '/' + slug); } } function onDark() { el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'; document.body.classList.add('dark'); __console.environment.ThemeStore.setState({ mode: 'dark' }); }; function onLight() { el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'; document.body.classList.remove('dark'); __console.environment.ThemeStore.setState({ mode: 'light' }); } function toggle() { if (document.body.classList.contains('dark')) { onLight(); } else { onDark(); } } function addDarkModeButton(device) { const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile'); el.className = 'toggle-mode'; el.addEventListener('click', toggle); nav.appendChild(el); onLight(); } const observer = new MutationObserver(function() { if (redirected) return; const nav = document.querySelector('.notion-topbar'); const mobileNav = document.querySelector('.notion-topbar-mobile'); if (nav && nav.firstChild && nav.firstChild.firstChild || mobileNav && mobileNav.firstChild) { redirected = true; updateSlug(); addDarkModeButton(nav ? 'web' : 'mobile'); const onpopstate = window.onpopstate; window.onpopstate = function() { if (slugs.includes(getSlug())) { const page = SLUG_TO_PAGE[getSlug()]; if (page) { history.replaceState(history.state, 'bypass', '/' + page); } } onpopstate.apply(this, [].slice.call(arguments)); updateSlug(); }; } }); observer.observe(document.querySelector('#notion-app'), { childList: true, subtree: true, }); const replaceState = window.history.replaceState; window.history.replaceState = function(state) { if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return; return replaceState.apply(window.history, arguments); }; const pushState = window.history.pushState; window.history.pushState = function(state) { const dest = new URL(location.protocol + location.host + arguments[2]); const id = dest.pathname.slice(-32); if (pages.includes(id)) { arguments[2] = '/' + PAGE_TO_SLUG[id]; } return pushState.apply(window.history, arguments); }; const open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function() { arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so'); return open.apply(this, [].slice.call(arguments)); }; </script>${CUSTOM_SCRIPT}`, { html: true } ); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on("title", new MetaRewriter()) .on("meta", new MetaRewriter()) .on("head", new HeadRewriter()) .on("body", new BodyRewriter(SLUG_TO_PAGE)) .transform(res); }  
      Tem alguma coisa de errado?
    • By violin101
      Caros amigos, saudações...
       
      Estou com uma pequena dúvida.

      Gostaria de mostrar a MENSAGEM de ERRO, quando a função no AJAX não encontrar o resultado.
       
      Meu código está assim:
      //Função para Buscar Cidade e Estado Via CEPs. $(function(){ $("#btn_consulta").click(function(){ var cep = $('#cepOrg').val(); if (cep == '') { alert('Informe o CEP antes de continuar'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').focus(); return false; } $('#btn_consulta').html ('Aguarde...'); $.ajax({ url: "<?php echo base_url();?>site/produtos/consulta", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //retorna o resultado encontrado //Exibe os Dados Recebidos $('#cidadeUf').val(data.localidade+'/'+data.uf); //Chama a Função para Exibir a DIV oculta statusDIV(); $('#btn_consulta').html('Consultar'); } });//Fim - ajax });//Fim - function button });//Fim - 1º.function

      Grato,
       
      Cesar
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.