Build Dynamic Playlist With Select Option

Question

Build Dynamic Playlist With Select Option

Navigation

#1 by (0 votes)

0

I want to create multiple "Play List" using a select element, instead of leaving it in the body of the HTML document , I want to put it in an "js" , and call each "Play List" through a "Search field" where you must type the corresponding Category , then it will appear inside a form element whose "id" is set to "playlist".

javascript select forms

asked by anonymous 27.09.2016 / 16:46

1 answer

Pages with content loaded dynamically by angular has problem with indexing in Google? How do I paste text into the same Excel column?

score 0 · Answer 1

I was able to do this ..

    <br> <br>

    <form name = "playlist">

    <select name = "selecao" multiple size = "10"> </select>

    </form>

	/* Acrescente nestas variáveis os Nomes de cada Categoria */
	/* E insira seus respectivos resultados dentro de Cada Array */
	humor = new Array("A", "B", "C");

	guerra = new Array("1", "2", "3");

	terror = new Array("I", "II", "III");


	/* Esta rotina destina-se em fazer a mudança entre as PlayList */
	/* na qual foi definida Acima, exibindo todo resultado no Select */

	function TrocarLista(formulario, listagem, genero) {

	    if (genero == "humor") {

	        var lista = humor;

	    } else {

	        if (genero == "guerra") {

	            var lista = guerra;

	        } else

	            var lista = terror;

	    }


	    /* Nesta parte é feito uma varredura de cada elemento */
	    /* que contém no PlayList, nos dando os números exato. */

	    var numero = document.forms[formulario][listagem];

	    numero.options.length = 0;

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

	        var item = lista[i];

	        numero.options[i] = new Option(item);

	    }

	}

	/* Agora para finalizarmos, criei o campo de busca simples */
	/* para efetuar a Busca por Categoria/Gênero se tratando de */
    /* uma PlayList de - Filmes, Vídeos, Clipes, Áudio, Músicas */

	buscar = function() {

	    var mostra = document.getElementById('categoria').value;

	    switch (mostra) {

	        case 'guerra':
	            TrocarLista('playlist', 'selecao', 'guerra');
	            break;

	        case 'humor':
	            TrocarLista('playlist', 'selecao', 'humor');
	            break;

	        case 'terror':
	            TrocarLista('playlist', 'selecao', 'terror');
	            break;

	        default:
	            alert('Desculpe, nada encontrado.');

	    }

	}

To do Test and see the result, simply type in the Search field one of the predefined Category : / strong>, war or terror

I did not add a lot of comments to make the code clean and spaced out, but ... I was concerned about doing it self-descriptively.

I hope this question and your answer will help other colleagues.