使用jQuery ComboBox我有一个Google Suggests和html下拉式组合，在它下面我需要显示＆amp;根据所选内容隐藏信息。
在下拉列表中，我有美国州，当选择一个州时，我需要向其显示相应的城市。现在，html代码中的城市设置为不显示。不知何故，我需要添加display：block;当用户从下拉列表中选择状态时。任何人都可以就如何实现这一目标分享一些见解吗？
这是我的代码
(function($) {
$.widget("custom.combobox", {
_create: function() {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function(event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function() {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function(event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
$(document).ready(function() {
$('.box').hide();
$('#ui-id-1').change(function() {
$('.box').show();
});
}); *:focus {
outline: 0;
}
.custom-combobox {
position: relative;
display: inline-block;
width: 100%;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
border-radius: 0px 5px 5px 0px;
background-color: #E0E0E0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
border-radius: 5px 0px 0px 5px;
width: 88%;
}<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="ui-widget">
<select id="combobox" name="combobox">
<option value="0">Find your state</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>-->
<option value="3">Arkansas</option>
<option value="4">Arizona</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
</select>
<ul>
<li id="1" class="box">
Birmingham
</li>
<li id="2" class="box">
Juneau
</li>
<li id="3" class="box">
Little Rock
</li>
<li id="4" class="box">
Flagstaff
</li>
<li id="5" class="box">
Sacremento
</li>
<li id="6" class="box">
Denver
</li>
<li id="7" class="box">
Hartford
</li>
<li id="8" class="box">
Dover
</li>
<li id="9" class="box">
Orlando
</li>
<li id="10" class="box">
Atlanta
</li>
<li id="11" class="box">
Honolulu
</li>
<li id="12" class="box">
Boise
</li>
<li id="13" class="box">
Chicago
</li>
<li id="14" class="box">
Indianapolis
</li>
<li id="15" class="box">
Cedar Rapids
</li>
<li id="16" class="box">
Kansas City
</li>
<li id="17" class="box">
Louisville
</li>
<li id="18" class="box">
New Orleans
</li>
<li id="19" class="box">
Austuga
</li>
<li id="20" class="box">
Annapolis
</li>
<li id="21" class="box">
Boston
</li>
</ul>
</div>
不确定代码段是否正常工作，但我的Fiddle功能正常。
答案 0 :(得分：1)
我不确定你是如何将州映射到城市的，但你可以做的是如下。
this._on( this.input, {
autocompleteselect: function( event, ui ) {
alert(ui.item.option.value);
$('.box').toggle();
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
使用autocompleteselect toggle()，ui.item.option.value也可以使用_removeIfInvalid获取所选选项的值。您需要处理无效值。你可以在new ConcurrentHashMap<Book, Booklog>(booklogMap);函数声明中做到这一点。
我建议在JSON文件中定义状态到城市的映射，其中key作为state选项的值，值作为city list。保持城市列表空/没有列表。根据选择的值，您可以读取JSON文件以创建动态列表并将其附加到div。
答案 1 :(得分：0)
我通过使用JSON来解决这个问题，并且可以在小提琴的here中看到解决方案。
如果你想发布我的代码/内容/解决方案，请单独向Stackoverflow发送消息，然后发布，但我没有兴趣做双重工作。糟糕的用户界面/用户体验和主观上它只是为了更好的S.O. （增加内容并保持用户使用SO）而不是用户。