显示/隐藏 <select> 下拉列表，使用 jQuery，基于值

Posted 2023-03-11

【中文标题】显示/隐藏 <select> 下拉列表，使用 jQuery，基于值

【英文标题】：Show/Hide <select> dropdown, with jQuery, based on value

【发布时间】：2011-05-16 00:22:27

【问题描述】：

我正在尝试构建一个自定义下拉列表，该下拉列表根据其选择显示/隐藏第二组下拉列表。

我想知道这里是否有人可以帮助解决这个问题。

var i = 0;
$(document).ready(function() 
  var bindClickToToggle = function(element) 
    element.click(function() 
      $(this).parents('.dropdown').find('dd ul').toggle();
    );
  ;

  var bindClickToUpdateSelect = function(element) 
    element.click(function() 
      var text = element.html();
      var value = element.find('span.value').html();
      var dropdown = element.parents('.dropdown');
      var select = $(dropdown.attr('target'));
      dropdown.children('dt').find('a').html(text);
      dropdown.find('dd ul').hide();
      select.attr('value', value);
    );
  ;

  var getItemHtml = function(element) 
    return '<dt><a href="#">' + element.text() + '<span class="value">' + element.attr('value') + '</span></a></dt>';
  ;

  var getDropdownHtml = function(id, target) 
    return '<dl id="target' + id + '" class="dropdown" target="#' + target.attr('id') + '"></dl>';
  ;

  var getEnclosingHtml = function() 
    return '<dd><ul></ul></dd>';
  ;

  var createDropDown = function(element, appendTo) 
    var selected = element.find('option[selected]');
    var options = element.find('option');
    appendTo.append(getDropdownHtml(i, element));
    var target = appendTo.find('#target' + i);
    target.append(getItemHtml(selected));
    target.append(getEnclosingHtml());
    var appendOptionsTo = target.find('ul');
    options.each(function() 
      appendOptionsTo.append(getItemHtml($(this)));
    );
    appendOptionsTo.find('a').each(function() 
      bindClickToUpdateSelect($(this));
    );
    i++;
  ;

  $('select').each(function() 
    createDropDown($(this), $('body'));
  );
  $('a').each(function() 
    bindClickToToggle($(this));
    $(this).click(function() 
      $(this).parents('ul').hide();
    );
  );

  $(document).bind('click', function(e) 
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) 
      $(".dropdown dd ul").hide();
    
  );
);

body 
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 0.75em;
  color: #000;


.desc 
  color: #6b6b6b;


.desc a 
  color: #0092dd;


.dropdown dd,
.dropdown dt,
.dropdown ul 
  margin: 0px;
  padding: 0px;


.dropdown dd 
  position: relative;


.dropdown a,
.dropdown a:visited 
  color: #816c5b;
  text-decoration: none;
  outline: none;


.dropdown a:hover 
  color: #5d4617;


.dropdown dt a:hover 
  color: #5d4617;
  border: 1px solid #d0c9af;


.dropdown dt a 
  background: #e4dfcb url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid #d4ca9a;
  width: 160px;
  padding: 5px;


.dropdown dt a span 
  cursor: pointer;
  display: block;


.dropdown dd ul 
  background: #e4dfcb none repeat scroll 0 0;
  border: 1px solid #d4ca9a;
  color: #C5C0B0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: 2px;
  width: auto;
  min-width: 170px;
  list-style: none;


.dropdown span.value 
  display: none;


.dropdown dd ul li a 
  padding: 5px;
  display: block;


.dropdown dd ul li a:hover 
  background-color: #d0c9af;


.dropdown img.flag 
  border: none;
  vertical-align: middle;
  margin-left: 10px;


.flagvisibility 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally.</p>
<div id="log"></div>
<select id="source">
  <option selected="selected" value="BR">Brasil</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
  <option value="IN">India</option>
</select>
<select id="source2a">
  <option selected="selected" value="BR">Cities in France</option>
  <option value="FR">France City 1</option>
  <option value="DE">France City 2</option>
  <option value="IN">France City 3</option>
  <option value="JP">France City 4</option>
  <option value="RS">France City 5</option>
  <option value="UK">France City 6</option>
  <option value="US">France City 7</option>
</select>
<select id="source2b">
  <option selected="selected" value="BR">Cities in Germany</option>
  <option value="FR">Germany City 1</option>
  <option value="DE">Germany City 2</option>
  <option value="IN">Germany City 3</option>
  <option value="JP">Germany City 4</option>
  <option value="RS">Germany City 5</option>
  <option value="UK">Germany City 6</option>
  <option value="US">Germany City 7</option>
</select>
<select id="source2c">
  <option selected="selected" value="BR">Cities in India</option>
  <option value="FR">India City 1</option>
  <option value="DE">India City 2</option>
  <option value="IN">India City 3</option>
  <option value="JP">India City 4</option>
  <option value="RS">India City 5</option>
  <option value="UK">India City 6</option>
  <option value="US">India City 7</option>
</select>

【问题讨论】：

+1 用于花时间将您的代码放在 jsFiddle 上，而不是仅仅将其粘贴到此处。

我会为两者都提供+2。在 jsfiddle 和此处发布。因为如果 jsfiddle 有一天自己搞砸了并且链接不再起作用会发生什么？

【参考方案1】：

使用 jquery :selected 一点文档在这里http://api.jquery.com/selected-selector/

这适用于选项选择菜单

如果你能给我更多关于你想要做什么的信息，我现在正在更新你的 Jfiddle。

---

编辑

这是一个更新的 jfiddle 与您的答案。 http://jsfiddle.net/stAAm/7/

以及堆栈溢出的代码副本

$('#source').change(function () 
        if ($('#source option:selected').text() == "France")
            $('.cities').hide();
            $('#source2a').show();
         else if ($('#source option:selected').text() == "Germany")
            $('.cities').hide();
            $('#source2b').show();
         else if ($('#source option:selected').text() == "India")
            $('.cities').hide();
            $('#source2c').show();
         else 
            $('.cities').hide();
         ); 

【讨论】：

@zobgib：从代码中可以看出，向下控件绑定到页面上的 SELECT 元素，该元素不是有意隐藏的。这意味着隐藏在最终代码中。国家下拉菜单（例如巴西、法国、印度）是唯一一个在第一次进入页面时显示的下拉菜单。然后，当从此下拉列表（例如其中一个国家）中进行选择时，将显示来自所选国家/地区的城市的下拉列表。

@zobgib：太好了，这正是我想要的：D 谢谢！现在我希望它与自定义下拉列表一起使用。有可能吗？

在我看来，自定义下拉列表工作正常，还是您想要在经典 中单击以打开自定义下拉列表？

我想要的是当我单击自定义下拉菜单时具有与使用经典时相同的效果。就像在从国家下拉菜单中进行选择时显示“子下拉菜单”，例如城市。