2

estou começando no desenvolvimento web, tenho a logica de como fazer as coisas, mas o problema é a implementação. Tenho um "UL" sendo populado por banco de dados, gostaria de saber como capturo o valor selecionado do "LI", jogo para uma variável e dessa variável jogar para o PHP, para que eu possa tratar uma pesquisa. Segue códigos. PS: HTML, CSS e PHP eu manjo até que bem, mas o problema é JS.

1 - JS que manipula o combo:

    $(document).ready(function () {
    $(".btn-select").each(function (e) {
        var value = $(this).find("ul li.selected").html();
        if (value != undefined) {
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
    });
});

$(document).on('click', '.btn-select', function (e) {
    e.preventDefault();
    var ul = $(this).find("ul");
    if ($(this).hasClass("active")) {
        if (ul.find("li").is(e.target)) {
            var target = $(e.target);
            target.addClass("selected").siblings().removeClass("selected");
            var value = target.html();
            $(this).find(".btn-select-input").val(value);
            $(this).find(".btn-select-value").html(value);
        }
        ul.hide();
        $(this).removeClass("active");
    }
    else {
        $('.btn-select').not(this).each(function () {
            $(this).removeClass("active").find("ul").hide();
        });
        ul.slideDown(300);
        $(this).addClass("active");
    }
});

$(document).on('click', function (e) {
    var target = $(e.target).closest(".btn-select");    
    if (!target.length) {
        $(".btn-select").removeClass("active").find("ul").hide();
    }
});

2 - PHP que popula o combo:

<label for="exampleInputName2">Cargo do Colaborador</label>
<a class="btn btn-default btn-select">
                <input type="hidden" class="btn-select-input" id="" name="" value="" />
                <span class="btn-select-value">Selecione o cargo (opcional)</span>
                <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                <ul>

                    <?
                    $sql="SELECT DISTINCT cargo FROM colaborador WHERE (unidade = 2) or (unidade = 1) order by cargo";

                    $query = mysql_query($sql);
                    if(mysql_num_rows($query)){
                      while($res=mysql_fetch_assoc($query)){

                       $cargo = $res['cargo'];
                        echo "<li id='$cargo'>$cargo</li>";
                      }
                    }

                    else{
                    echo "<li>Nenhum Setor cadastrado!</li>";
                    }                   
                    ?>
                    <!--se quiser um item selecionado, só colocar no LI - class="selected"-->
                </ul>
            </a>

Se estiver fazendo algo de errado, por favor, corrijam. Desde já, agradeço a ajuda!

4
  • O que seria esse input[type=hidden] no HTML? Já para armazenar o cargo selecionado? E por quê esse código inteiro está em um elemento a? Não vi lógica nisso.
    – Woss
    5/07/2017 às 15:36
  • Olá Anderson, para ser sincero, utilizei um código pronto da internet, então não sei ao certo para que serve esse input. 5/07/2017 às 15:38
  • Sendo sincero, então você está começando da forma errada. Nada contra pegar códigos prontos (desde que sejam livres), mas busque saber o que esses códigos fazem antes de usar.
    – Woss
    5/07/2017 às 15:39
  • Esse elemento A define o estilo do botão, já que é utilizado Bootstrap. Obrigado pela dica. Vou tentar entender ele. 5/07/2017 às 15:44

2 Respostas 2

2

O elemento oculto com seletor "class=btn-select-input" recebe o valor escolhido.

<input type="hidden" class="btn-select-input" id="" name="" value="" />

O trecho do JavaScript que atribui o valor ao elemento:

    var value = $(this).find("ul li.selected").html();
    if (value != undefined) {
        $(this).find(".btn-select-input").val(value); // Esse aqui

Não existe nenhum formulário nos códigos que postou.

Para enviar a informação para o backend (php), terá que submeter um formulário.

Pode fazer da forma tradicional <form action="bababa">coisa e tal</form> ou usando Ajax (xmlhttprequest).

Se optar pela forma tradicional, sem uso de javascript, terá que colocar o elemento oculto dentro de um <form> e definir um nome para esse elemento e adicionar um botão de submit.

Exemplo:

<form action="pagina.php" method="POST">
<input type="hidden" class="btn-select-input" id="" name="cargo" value="" />
<input type="submit" value="send" />
</form>

No PHP, basta requisitar o parâmetro

if (isset($_POST['cargo'])) {
    echo $_POST['cargo'];
}
1
  • Obrigado pelo esclarecimento Daniel, agora consegui compreender e deu super certo :D 7/07/2017 às 11:47
2

Tenho um código em javascript puro retirado do livro JavaScript a Bíblia

var isNav4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4)
var isNav4Min = (navigator.appName == "Netscape" && 
	parseInt(navigator.appVersion) >= 4)
var isIE4Min = (navigator.appName.indexOf("Microsoft") != -1 && 
	parseInt(navigator.appVersion) >= 4)

function showSelection() {
	if (isNav4Min) {
		document.forms[0].selectedText.value = document.getSelection()
	} else if (isIE4Min) {
		if (document.selection) {
			document.forms[0].selectedText.value = document.selection.createRange().text
			event.cancelBubble = true
		}
	}
}
if (isNav4) {
	document.captureEvents(Event.MOUSEUP)
}
document.onmouseup = showSelection

document.write ("Selecione o resultado da busca");
<ul>
	<li id='manda-chuva'>Manda Chuva</li>
	<li id='diretor'>diretor</li>
	<li id='gerente'>gerente</li>
	<li id='chefe'>chefe</li>
	<li id='indio'>indio</li>
</ul>



<form name="MeuForm" action="Pagina Destino" target="_top" method="post">
<input type="text" name="selectedText">
<input type="submit" value="enviar">
</form>

Pagina Destino

if (isset($_POST['selectedText"'])) {
 $cargo = $_POST['selectedText"'];
}
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .