HTML:
<div class="form-group"> <label class="col-sm-4 control-label">地址：</label> <div class="col-sm-4"> <div class="input-group"><!--保持内联，消除边框，类似于form-inline--> <input type="text" class="form-control" name="houseCode" id="houseCode" readonly="true" required> <div class="input-group-btn"><!--不换行，与相邻元素内联，包含dropdown--> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" onclick="getHouseCode()" aria-expanded="false"> 请选择<span class="caret"></span> </button> <ul id="houseCodeList" class="dropdown-menu"> //遍历的<li>显示位置 </ul> </div> </div> </div> </div>JS:
$("#houseCodeList").on("click", "li", function () { $("#houseCode").val($(this).text()); //获取选中<li>的内容并填入对应input StationNo = $(this).children("a").attr("id"); //获取选中<li>下<a>标签的ID text = $(this).children("a").attr("code") //获取选中<li>下<a>标签的code console.log(text); $("#address").val($(this).children("a").attr("code"));获取选中<li>下<a>标签的code并填入对应input });/* getHouseCode */ function getHouseCode() { $.ajax({ url: url, type: "GET", withCredentials :true, success: function (date2) { var date = eval(date2.result); //获取结果集 for (var j = 0; j < date.length; j++) { $("#cc").remove(); //清除之前生产的旧<li> } for (var i = 0; i < date.length; i++) { var html = ""; html = "<li id='cc'><a href=\"#\" code='" + date[i].address + "' id='" + date[i].stationNo + "'>" + date[i].stationName + "</a></li>"; $("#houseCodeList").append(html); //<拼接> } } }); } 下面为给<li>下<a>标签添加函数，可遍历添加 $("#houseCodeList li a").attr("onclick", "getTypeList(this.id)");
