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!
input[type=hidden]
no HTML? Já para armazenar o cargo selecionado? E por quê esse código inteiro está em um elementoa
? Não vi lógica nisso.