Ir para conteúdo
Fórum Script Brasil
  • 0

Como Adicionar Valores à Um Combo (select)


dark0

Pergunta

Olá pessoal.

Como posso adicionar opções em um select, usando uma função javascript?

Exemplo.

tenho o codigo:

<form name="form1" method="post">
<table>
<tr>
	<td class="Desc_Opcoes_di">Categoria:</td>
	<td class="Desc_Opcoes_es" colspan="3">
	<select name="categorias" size="1" id="categorias" onchange="nome_funcao();">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	</td>
</tr>
<tr>
	<td class="Desc_Opcoes_di">Marca:</td>
	<td class="Desc_Opcoes_es" colspan="3">
	<select name="marcas" size="1" id="marcas">
		<option value="2">2</option>
	</select>
	</td>
</tr>
</form>	
</table>
<script>
function nome_funcao()
{
 alert('Como adicionar uma opção no segundo select, usando essa função?');
}
</script>

Qual seria o modo para adicionar uma nova opção no segundo combo, ao mecher no primeiro combo?

Eu tentei inúmeras coisas.. como document.form1.marca.options(add())

alguém da um help ae?

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0

Olá dark0,

Abaixo, coloquei o script, mas você pode alterá-lo conforme a necessidade.

Uma sugestão seria utilizar o prompt, para guardar valores colocados pelo usuário caso você vá recuperar e guardá-los em um DB.

<script>
var n=0;
function nome_funcao(v){
if(v == "1"){
var valor = "12345678910"
if(valor == null){
return false;
}else{
document.form1.marcas.options[document.form1.marcas.options.length] = new Option(valor,true);
}
}else{
return false;
}

}
</script>
<form name="form1" method="post">
<table>
<tr>
<td class="Desc_Opcoes_di">Categoria:</td>
<td class="Desc_Opcoes_es" colspan="3">
<select name="categorias" size="1" id="categorias" onChange="nome_funcao(this.options[this.selectedIndex].value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td class="Desc_Opcoes_di">Marca:</td>
<td class="Desc_Opcoes_es" colspan="3">
<select name="marcas" size="1" id="marcas">
<option value="2">2</option>
</select>
</td>
</tr>
</form>
</table>

Qualquer coisa, da pra adiciona mais valores à marcas de acordo com a quantidade de valores de categorias.

falou.

Link para o comentário
Compartilhar em outros sites

  • 0

valeu meu brother.

vou tentar montar algum codigo baseado na sua idéia.

é que eu quero jogar nesse select valores vindos do banco.. conforme a seleção acima.. mas sem atualizar a pagina, hehehe

qualquer coisa eu posto aqui

valeu ae

abraço

Link para o comentário
Compartilhar em outros sites

  • 0

beleza..

deu certinho!

o que eu precisava saber, era:

document.form1.marcas.options[document.form1.marcas.options.length] = new Option('valor',true);

só essa linha me bastava, hehehe

Mais uma duvida..

e pra remover uma opção da lista ?

uso o remove.. né? qual a sintaxe?

abração

Link para o comentário
Compartilhar em outros sites

  • 0

thanks crystian..

era isso mesmo smile.gif

abraço

Link para o comentário
Compartilhar em outros sites

  • 0

Aqui vai um que foi postado pelo Filipe no desafio de Java Script / CSS / DHTML

<html>
<head>
<style type="text/css">
#centro {
position : absolute;
top : 50%;
left : 50%;
margin-top : -50px;
margin-left : -50px;
}
.negrito {
color : #FF0000;
font-size : 20px;
}
</style>
<script language="JavaScript">
function atualiza(p_indice, p_combo) {
if(p_indice == 1) {
var strOpcao = prompt('Digite a opção a ser inserida','');
if(strOpcao == '') {
alert('Digite um valor para a opção');
p_combo.options[0].selected = true;
} else {
var intTamanho = p_combo.length;
p_combo.length = intTamanho + 1;
p_combo.options[intTamanho].text = strOpcao;
p_combo.options[intTamanho].value = intTamanho;
p_combo.options[intTamanho].selected = true;
}
}
}
</script>
</head>
<body>
<div id="centro">
<select name="cbo_desafio" onChange="atualiza(this.selectedIndex, this);">
<option value="0">Desafio</option>
<option class="negrito" value="1">>> Outros</option>
</select>
</div>
</body>

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novos posts.


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...