jQuery ComboBox：显示和隐藏？

Question

使用 jQuery ComboBox，我有一个 Google Suggests 和 html 下拉菜单之类的组合，在它下面我需要根据所选内容显示和隐藏信息。

Within the dropdown I have US states and when one is selected I need to show it's corresponding city.城市在 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>

不确定 sn-p 是否正常工作，但我的 Fiddle 是否正常工作。

Answer 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 函数声明中执行此操作。

我建议在 JSON 文件中定义状态到城市的映射，其中键作为状态选项的值，值作为城市列表。保持城市列表为空/根本没有列表。根据选择的值，您可以读取 JSON 文件以创建动态列表并将其附加到 div。

Answer 2

我通过使用 JSON 解决了​​这个问题，解决方案可以在here in a fiddle 中看到。

如果您想在此处发布我的此代码/内容/解决方案，请在 Stackoverflow 的单独说明中继续发布，但我对做双重工作没有兴趣。糟糕的用户界面/用户体验，主观上它只是为了更好的 S.O. （增加内容并让用户继续使用 SO）而不是用户。