-
Conteúdo Similar
-
Por Raffael Dornelles Jardim
E ai gurizada, tudo bem?
Preciso de um help. Estou inserindo um campo select com seleção múltipla:
<div class="example"> <script type="text/javascript"> $(document).ready(function() { $('#example-getting-started').multiselect(); }); </script> <select id="example-getting-started" multiple="multiple" class="multiselectTeste"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="Mozzarella">Mozzarella</option> <option value="Mushrooms">Mushrooms</option> <option value="Pepperoni">Pepperoni</option> <option value="Onions">Onions</option> </select> </div>
O problema é quando esse campo é carregador na tela ele cria outros elementos no html como button. Como faço para sobrescrever outra propriedade do css, pois eu já tenho definido um :
.formulario button[type="button"] { background: #333; border: 1px solid #222; color: #fff; font-size: 14px; padding: 0; line-height: 34px; cursor: pointer; font-weight: bold; height: 34px; border-radius: 3px; margin: 0 0 15px; }
mas preciso que esse novo select tenha outras propriedades.
Não sei se conseguir se claro.
-
Por ronierick
Pessoal, boa tarde.
estou com um grande problema. tenho um combo de select dinâmico que é a seguinte ordem:
1. Pais
2. UF
3. Cidade
4. Bairro
Essas informações são carregadas do MYSQL. Considerando que seja uma select dinâmico, preciso que o campo bairro se torne um "multiselect". Para selecionar vários bairros de uma vez.
meu código é este:
COMBO.JS
jQuery(document).ready ( function() { /* * Chamamos aqui a função que vai controlar os campos. * Desta forma, caso você precise repetir o combo dinâmico * basta trocar os ID's dos SELECT's */ comboDinamico("pais", "estado", "cidade", "bairro"); // suposição de segundo bloco de selects // comboDinamico("pais_cliente", "estado_cliente", "cidade_cliente", "bairro_cliente"); } ); /* * função para carregar uma lista dinâmica */ comboDinamico = function(pais, estado, cidade, bairro) { /* * Variáveis que precisamos pegar * Usamos getElementById() pois é assim que conseguiremos * passar o elemento por variável para jQuery */ var pais = document.getElementById(pais); var estado = document.getElementById(estado); var cidade = document.getElementById(cidade); var bairro = document.getElementById(bairro); /* * Carregamos a lista automaticamente quando a página carrega */ $(pais).load('localizacoes.php?tipo=pais'); /* * Populamos o combo dos estados quando trocamos um valor no pais * Os próximos blocos serão similares quanto à validação pelo valor igual à zero */ $(pais).change( function() { if($(this).val() == 0) { alert('Você precisa informar um PAÍS!'); $(this).focus(); } else { $(estado).load('localizacoes.php?tipo=estado&pais=' + $(this).val()); } } ); /* * Populamos o combo das cidades quando trocamos um valor no estado */ $(estado).change( function() { if($(this).val() == 0) { alert('Você precisa informar o ESTADO!'); $(this).focus(); } else { $(cidade).load('localizacoes.php?tipo=cidade&estado=' + $(this).val()); } } ); /* * Populamos o combo dos bairros quando trocamos um valor na cidade */ $(cidade).change( function() { if($(this).val() == 0) { alert('Você precisa informar a CIDADE!'); $(this).focus(); } else { $(bairro).load('localizacoes.php?tipo=bairro&cidade=' + escape($(this).val())); } } ); /* * Uma validação simples só para garantir que não escolher um valor nulo */ $(bairro).change( function() { if($(this).val() == 0) { alert('Você precisa informar o BAIRRO!'); $(this).focus(); } else { return true; } } ); } TESTE.PHP
<html> <head> <meta charset="utf-8"> <meta name="author" content="Ronierick Holanda"> <link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" type="text/css"/> <script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script> <script src="combo.js"></script> <!-- Include the plugin's CSS and JS: --> <script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css"/> </head> <body> <script type="text/javascript"> $(document).ready(function() { $('#bairro').multiselect({ maxHeight: 10000 }); }); </script> <form action="" method="post"> <h1>Localizações</h1> <label><span>País:</span> <select name="pais" id="pais"></select> </label> <label><span>Estado:</span> <select name="estado" id="estado"><option value="0">--Primeiro o País--</option></select> </label> <label><span>Cidade:</span> <select name="cidade" id="cidade"><option value="0">--Primeiro o Estado--</option></select> </label> <label><span>Bairro:</span> <select name="bairro" id="bairro"> <option multiple="multiple" name="multiselect[]">--Primeiro a Cidade--</option></select> </label> <br /> <label><input type="submit" value="Procurar" /> </form> </body> </html> Alguém poderia me ajudar?
-
Por asacap1000
Galera estou com uma zica e não consigo resolver. Preciso da ajuda de vocês.
Tenho um formulário de Ordem de Coleta, e existe um campo que carrega as informações vinda do Banco de dados referente aos documentos disponíveis. Até aí blz.
Para ele criar esta ordem de coleta ele pode escolher quais documentos ele irá retirar, sendo assim estou utilizando duas janelas a primeira carrega os numeros dos documentos e ao clicar no documento ele é enviado para outra janela.
Segue a parte do script.
<table width="600" height="190" border=0 align=left cellpadding="0" cellspacing="0" valign=center bordercolor="#ffffff"> <tr> <label><strong>DOCUMENTOS LIBERADOS - CASO NÃO ENCONTRE NA LISTA ABAIXO <b style="color:#0049F4"><a href="javascript:abrir('statusdoc.php');"> -> CLIQUE AQUI <- </a></b><P> CLIQUE NOS DOCUMENTOS PARA ADICIONAR À ORDEM</strong></label><br/><hr> <td width="280"><div align="center"class="easyui-datagrid" id="dg" style="width:300px" title="Documentos DisponÃveis" url="apontador1_getdata.php"></div><strong>Documentos Disponíveis</strong></td> <td width="130"></td> <td width="280"><div align="center"class="easyui-datagrid" id="dg" style="width:300px" title="Documentos Selecionados" url="apontador1_getdata.php"></div><strong>Documentos Adicionados à Ordem</strong></td> </tr> <tr> <td height="168"><script type="text/javascript"> var from_array = new Array('<?php ociexecute($stmu); while (($row = oci_fetch_array($stmu, OCI_BOTH)) != false) { echo "".oci_result($stmu,1) ."; ','<strong></strong><hgroup>"; }?>'); // neste campo é gerado a lista de documentos liberados var to_array = new Array(); // neste campo recebe os documentos selecionados function moveoutid() { var sda = document.getElementById('xxx'); var len = sda.length; var sda1 = document.getElementById('tb_doc'); for(var j=0; j<len; j++) { if(sda[j].selected) { var tmp = sda.options[j].text; var tmp1 = sda.options[j].value; sda.remove(j); j--; var y=document.createElement('option'); y.text=tmp; try {sda1.add(y,null); } catch(ex) { sda1.add(y); } } } } function moveinid() { var sda = document.getElementById('xxx'); var sda1 = document.getElementById('tb_doc'); var len = sda1.length; for(var j=0; j<len; j++) { if(sda1[j].selected) { var tmp = sda1.options[j].text; var tmp1 = sda1.options[j].value; sda1.remove(j); j--; var y=document.createElement('option'); y.text=tmp; try { sda.add(y,null);} catch(ex){ sda.add(y); } } } } function selectAll(){ var selecionados = document.getElementById('tb_doc'); for(i=0; i<=selecionados.length-1; i++){ selecionados.options[i].selected = true; } } </script> <script type="text/javascript"> for(var j=0;j<to_array.length;j++) { document.write['<value>'+to_array[j]+'</value>']; el.options[i].selected = true; } </script> <select name="xxx" onClick=moveoutid() size=15 multiple id=xxx style="width:280" draggable="true"> <script type="text/javascript"> for(var i=0;i<from_array.length;i++) { document.write('<option>'+from_array[i]+'</option>'); } </script> </select></td> <td><p align="center"> <input type=button hidden="1" value="Selecionar" onClick=moveoutid()> </p> <p align="center"> <img src="setaverde.png" width="180" height="79" alt=""/> <input type=button hidden="1" value="Retirar" onClick=moveinid()> </p></td> <td> <select name="tb_doc[]" spellcheck="true" onClick=moveinid() id="tb_doc" multiple="multiple" size=15 style="width:280 ;text-transform: uppercase; color:#C00000; font-weight:bold" cols="50" rows="17"> </select> Vamos ao problema, se eu coloco um required no <select name "tb_doc[]"> obrigatóriamente tenho que selecionar todos os documentos para poder enviar todos que escolhi senão ele só vai o selecionado. Se eu não colocar o required o cliente pode esquecer de selecionar o documento e criar a ordem sem o documento.
Como eu poderia fazer esta validação e ao mesmo tempo capturar todos os documentos selecionados sem mudar de página.
-