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

Question

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

10

我正在尝试构建一个自定义下拉列表，它基于所选项的选择来显示/隐藏第二组下拉列表。

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

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>

- iamchriswick

5

感谢您花时间将代码上传至jsFiddle，而不仅仅在这里粘贴。 - RPM1984

1

我会给予+2分，如果你能在jsfiddle和这里都发布代码。因为如果jsfiddle某天出了问题，链接就不能再使用了。 - Simon Schubert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- austinbv · Accepted Answer

使用jQuery的:selected选择器，相关文档可以在这里找到：http://api.jquery.com/selected-selector/

它适用于选项选择菜单。

如果您能提供更多关于您想要完成的内容的信息，我现在正在更新您的Jfiddle。

编辑

这是一个带有您答案的更新后的Jfiddle链接：http://jsfiddle.net/stAAm/7/

以下是用于Stack Overflow的代码副本：

$('#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();
        } });