Select html

Front-end
#1

galera, preciso fazer o seguinte: tenho dois selects (tipo de dados do html) que aqui vou chamar de A e B. No A tenho a lista de categorias e o B irá receber as categorias selecionadas pelo A. Ou seja, terei um botão que o usuário irá adicionando as categorias que ele quer. Como posso fazer isso? Vlw…

#2

Javascript via DOM + AJAX.

#3

tem que ser uma coisa mais básica. como se fosse dinamicamente com swing, clica no botão e já atribui o valor do outro. é q nao manjo muito de java script…

#4

Javascript sozinho consegue, acessando o DOM do HMTL.

#5

seria algo do tipo??



<script>
function preenche(){

	var indexSelect = document.getElementById("select").selectedIndex;
	var valueSelected = document.getElementById('form1').document.getElementById("select").select.options[indexSelect].value;
	document.getElementById('caixa').value = valueSelected;
}
</script>

<html>
<body>

<form action="teste.html" id="form1">

<select name="select" size="1" multiple="multiple" id="select" style="width:250px; height:150px;" class="camposelect">
<option value="categoria1">categoria 1</option>                                                
<option value="categoria 2">categoria 2</option>
<option value="categoria 3">categoria 3</option>
</select> 

<input type="button" onClick="preenche()" value=">>">
<input type="text" name="caixa" id="caixa" onClick="preenche()" >

</form>
</body>
</html>
#6

Use o método add().
Veja a referência completa nesse site: http://www.w3schools.com/htmldom/dom_obj_select.asp

#7

vlw…deu certinho o código é esse:


<html>
<head>
<script type="text/javascript">
function preenche()
{
	var select1 = document.getElementById("select")
	var select2 = document.getElementById("select2")
	var option = document.createElement('option')

	option.text = select1.options[select1.selectedIndex].text
	
	try
    {   select2.add(option,null);   }
	catch(ex)
    {  	select2.add(option.value);  }
	
}
</script>
</head>

<body>
<form>
<select name="select" size="1" multiple id="select" style="width:250px; height:150px;" class="camposelect">
<option value="categoria1">categoria 1</option>
<option value="categoria 2">categoria 2</option>
<option value="categoria 3">categoria 3</option>
</select> 
<input type="button" onClick="preenche()" value=">>">
<select name="select2" size="1" multiple id="select2" style="width:250px; height:150px;" class="camposelect">
</select> 

</form>
</body>
</html>
#8

Maravilha!

#9