Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

aprendizhtm

Carregar página a partir de dois combobox usando apenas javascript

Por , em Javascript

Recommended Posts

aprendizhtm    3

aprendizhtm
Postado

Olá, amigosEstou iniciando em html e javascript, e gostaria de fazer uma página da seguinte forma:Dois combobox, um contendo temas de artigos e o outro contendo a quantidade de artigos relacionados ao tema selecionado no primeiro combo. Ao se apertar num botão OK, a página selecionada é carregada.Exemplo:Seleção no primeiro combo: javascript (javascript, html, php, etc.)Seleção no segundo combo: 15 (numera de 1 a 15, pois teria 15 artigos de javascript)Página: javascript15.htmlSei que em php ou outra linguagem parecida isso deve ser muito mais fácil, mas eu peço que me digam como fazer isso apenas usando as linguagens que estou aprendendo agora. Desde já, obrigado a todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

aprendizhtm    3

aprendizhtm
Postado

Achei um código na internet e o adaptei ao que eu quero fazer. Só que eu não entendi como o código faz o que faz, apenas o adaptei até onde pude e vi que ele funciona.

 

Até aí, tudo bem...

http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

1. O que eu coloco no onClick do botão pra ele abrir a página que eu quero?

2. Tem como "capinar" esse código? Pelo menos na numeração, será sempre de 1 até "x"...

3. Tem como eu chamar parte desse código em um arquivo separado? Pensei em colocar o script num arquivo separado (arquivo.js) e chamá-lo...

 

<html>

<head>

<script type="text/javascript">

var capsdb = new Object()

 

capsdb["html"] =

[{value:"1", text:"1"},

{value:"2", text:"2"},

{value:"3", text:"3"},

{value:"4", text:"4"}];

 

capsdb["javascript"] =

[{value:"1", text:"1"},

{value:"2", text:"2"},

{value:"3", text:"3"},

{value:"4", text:"4"},

{value:"5", text:"5"}];

 

capsdb["php"] =

[{value:"1", text:"1"},

{value:"2", text:"2"}];

 

capsdb["ajax"] =

[{value:"1", text:"1"},

{value:"2", text:"2"},

{value:"3", text:"3"},

{value:"4", text:"4"},

{value:"5", text:"5"},

{value:"6", text:"6"},

{value:"7", text:"7"},

{value:"8", text:"8"}];

 

capsdb["flash"] =

[{value:"1", text:"1"},

{value:"2", text:"2"},

{value:"3", text:"3"},

{value:"4", text:"4"}];

 

capsdb["dreamweaver"] =

[{value:"1", text:"1"},

{value:"2", text:"2"},

{value:"3", text:"3"}];

 

function setNumber(chooser) {

var newElem;

var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;

var numberChooser = chooser.form.elements["number"];

while (numberChooser.options.length) {

numberChooser.remove(0);

}

var choice = chooser.options[chooser.selectedIndex].value;

var db = capsdb[choice];

newElem = document.createElement("option");

newElem.text = "Número do artigo:";

newElem.value = "";

numberChooser.add(newElem, where);

if (choice != "") {

for (var i = 0; i < db.length; i++) {

newElem = document.createElement("option");

newElem.text = db.text;

newElem.value = db.value;

numberChooser.add(newElem, where);

}

}

}

 

/**********

DOM LEVEL 0 ALTERNATE

**********

function setNumber(chooser) {

var numberChooser = chooser.form.elements["city"];

// empty previous settings

numberChooser.options.length = 0;

// get chosen value to act as index to regiondb hash table

var choice = chooser.options[chooser.selectedIndex].value;

var db = capsdb[choice];

// insert default first item

numberChooser.options[0] = new Option("Número do artigo:", "", true, false);

if (choice != "") {

// loop through array of the hash table entry, and populate options

for (var i = 0; i < db.length; i++) {

numberChooser.options[i + 1] = new Option(db.text, db.value);

}

}

}

**********/

</script>

</head>

<body>

<form>

<select name="caps" onchange="setNumber(this)">

<option value="" selected>Escolha um assunto:</option>

<option value="html">Html</option>

<option value="javascript">Javascript</option>

<option value="php">PHP</option>

<option value="ajax">Ajax</option>

<option value="flash">Flash</option>

<option value="dreamweaver">Dreamweaver</option>

</select><p>

<select name="number">

<option value="" selected>Número do artigo:</option>

</select></p>

<p>

<INPUT type="button" name="go" value="Abrir" onClick="???">

<!--

O que eu ponho em "onClick"?

Suponha que eu escolha "PHP" no primeiro combo e "2" no segundo.

Quero abrir a página "php2.html"

-->

</p>

</form>

</body>

</html>

 

Alguém, quebra o galho aí... eu tô aprendendo sozinho... http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

aprendizhtm    3

aprendizhtm
Postado

Acho que consegui resolver o meu problema.

 

"html"

<HTML><HEAD></HEAD><BODY><form name="doublecombo"><select name="artigos" size="1" onChange="redirect(this.options.selectedIndex)"><option>javascript</option><option>php</option><option>html</option></select><select name="capitulo" size="1"><option value="javascript1.html">1</option><option value="javascript2.html">2</option><option value="javascript3.html">3</option></select><input type="button" value="Visitar página" onClick="go()"><script type="text/javascript" src="arquivo.js"></script></form></BODY></HTML>
"arquivo.js"

var groups=document.doublecombo.artigos.options.lengthvar group=new Array(groups)for (c=0; c<groups; c++)group[c]=new Array()group[0][0]=new Option("1","javascript1.html")group[0][1]=new Option("2","javascript2.html")group[0][2]=new Option("3","javascript3.html")group[1][0]=new Option("1","php1.html")group[1][1]=new Option("2","php2.html")group[2][0]=new Option("1","html1.html")group[2][1]=new Option("2","html2.html")group[2][2]=new Option("3","html3.html")group[2][3]=new Option("4","html4.html")group[2][4]=new Option("5","html5.html")group[2][5]=new Option("6","html6.html")var temp=document.doublecombo.capitulofunction redirect(x){for (m=temp.options.length-1;m>0;m--)temp.options[m]=nullfor (c=0;c<group[x].length;c++){temp.options[c]=new Option(group[x][c].text,group[x][c].value)}temp.options[0].selected=true}function go(){location=temp.options[temp.selectedIndex].value}
Se algum iluminado conseguir completar o código que postei anteriormente para fazê-lo funcionar, eu agradeceria. E, lógico, se puder opinar e "capinar" um pouco o código deste post (e/ou o anteriormente postado), seria de grande ajuda para mim.

 

Desde já, obrigado a todos! Agora vou dormir, que já são 02:11 http://forum.imasters.com.br/public/style_emoticons/default/dormindo.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito