Pegar pelo javascrit item selecionado

Olá pessoas boa tarde. Fiz um formulário em bootstrap em um site, e tenho 2 campos combobox(cidade e estado). Porém esses campos não foram implementados usando um select, e sim uma div um campo text e um button com vários filhos em baixo.
Não sei como proceder para pegar qual eu seleciono com o click do mouse, pois o primeiro li está com .active e eu consigo recuperar o .text() no jquery. Mas eu queria pegar o valor do que eu cliquei pra fazer o post do formulario. Segue meu código do formulário e javascript:

var cidade = $("li.active").text();
alert(cidade); // Aqui abre o active

Meu combo lá no html (coloquei 3 cidades de exemplo apenas):

<!-- Button Drop Down -->
			<div class="form-group">
				<label class="col-md-4 control-label" for="city">Cidade</label>
				<div class="col-md-4">
					<div class="input-group">
					<input id="city" name="city" class="form-control" placeholder="" type="text" required="">
					<div class="input-group-btn" id="combocidade">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Selecione a cidade
							<span class="caret"></span>
						</button>
					<ul class="dropdown-menu pull-right">
						<li class="active"><a href="#">Belo H.</a></li>
						<li class="" id="item"><a href="#">Betim</a></li>
						<li class="" id="item"><a href="#">Ipatinga</a></li>
					</ul>
					</div>
					</div>
				</div>
			</div>

Tenta o seguinte código

var cidade = ("li.active").textContet;

Você pode atribuir novo valor cada vez que houver o click em um nova li

cidade = $(“li.active”).text();

Entenda, você está atribuindo o valor a variável cidade para li com a class active, que inicialmente é a primeira cidade, se tudo estiver ok, quando você clica nas demais li, ele retira a class active da primeira e adiciona á li clicada certo?
Assim você precisa atribuir o novo valor para a class cidade 0/.

Espero ter ajudado.