Botão que carrega mais Selects com PHP

[gabriel.anhaia 1]

Vou tentar explicar minha dúvida, estou criando uma formulário de cadastro de filme pode ter uma ou várias categorias.

Montei o código a baixo em PHP que carrega todas a categorias a partir de um banco de dados.

			<tr>	<td>Categorias:</td>	
				<td>
					<select>
						<?php 
							$categorias = carregarAll('categorias');
							if( !empty($categorias) ){
								foreach($categorias as $categoria){
									echo '<option value="' . $categoria['id'] . '">' . $categoria['nome'] . '</option>';
								}
							}
						?>
					</select>
					<button id="mais_categorias" method="clean">+</button>
				</td>	<td>		</td>	
			</tr>

A ideia do botão é carregar um novo Select com toda esta estrutura repetida a baixo caso o operador queira cadastrar varias categorias em um mesmo filme.

Porem gostaria saber como faço para carregar toda essa estrutura de código (html e php) dinamicamente ao clicar no botão, tenho certeza que pode ser feito com JS, porem não sei como.

Obrigado.

[Criquio 19]

A intenção é criar campos para adicionar mais categorias? Se for, pesquise por "javascript criar campo" no fórum e/ou no google. Acredito que encontrará facilmente.

[gabriel.anhaia 1]

é que na verdade meu problema é o seguinte, o campo select carrega as categorias cadastradas no banco de dados, porem o campo seguinte teria que ser mostrado ao clicar no botão, mas o campo seguinte não poderia ter a categoria selecionada nos campos anteriores.

 

ex: no primeiro campo o usuário seleciona 'ação', ai clica no '+' e aparece um novo <select> que mostra os dados do array porem eliminando o selecionado no select anterior. Senão o usuario poderia selecionar duas categorias iguais ou mais. É claro que as duas categorias iguais podem ser removidas no final tranquilamente em php, porem visualmente isso não ficaria legal.

[Criquio 19]

Velho, está meio confuso. Seria possível botar um print dessa parte e explicar com base nele?

[gabriel.anhaia 1]

Como pode ver lá em baixo eu coloquei dois selects, porem dupliquei o código manualmente, teria que ter o primeiro e o botão '+' , ai ao clicar ele aparece mais um. Porem o que comentei antes foi que ele não poderia estar repetido como nessa imagem. Lembrando que os dados são carregados dinamicamente pelo PHP de um banco de dados. Ou seja, quando eu clicasse para adicionar um novo ele teria que executar um código em php para buscar as categorias novamente e eliminar a anterior, e ai sim mostrar as opções, ai se eu clicasse em adicionar um terceiro ele criaria o terceiro porem sem as categorias selecionadas no segundo e primeiro.

 

Se alguém pudesse me ajudar pelo menos me mostrando como carregar mais selects ao clicar no botão já me ajuda, essa parte que falei antes é menos importante no momento.

 

ds

[Criquio 19]

Eu faria diferente. Colocaria todas as categorias na caixa de seleção e ao ir selecionando os gêneros, iria adicionando-os em um campo readonly e excluindo-o da lista ou, para o caso de querer permitir que uma escolha possa ser anulada, iria criando campos para ir colocando as opções com um botão [x] para o caso da pessoa querer desfazer, poder voltar os valores para a lista de seleção.

Veja como remover um elemento de uma select aqui: http://www.w3schools.com/jsref/met_select_remove.asp

O bom é que você pode testar ali mesmo para ver como funciona.

E para criar campos: http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/

[gabriel.anhaia 1]

ótima ideia, bem mais simples e funcional. irei testar aqui, obrigado!