Show/Hide <select> dropdown, with jQuery, based on value

Question

I'm trying to build a custom dropdownlist which show/hide a second set of dropdowns based on it's selection.

I was wondering if anyone here might be able to help with a solution to this.

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 for taking the time to put your code up on jsFiddle, rather than just pasting it here. — RPM1984
– RPM1984, Commented Nov 26, 2010 at 4:34
I would give +2 for doing both. Posting on jsfiddle and here. Because what happens if jsfiddle shits itself one day and the link doesnt work anymore? — Simon Schubert
– Simon Schubert, Commented May 4, 2017 at 17:27

austinbv · Accepted Answer · 2010-11-26 06:50:22Z

8

use the jquery :selected a little bit of documentation is here http://api.jquery.com/selected-selector/

That works in an option select menu

I am updating your Jfiddle now if you can give me a little more info about what you want done.

Edit

Here is an updated jfiddle with your answer. http://jsfiddle.net/stAAm/7/

and a copy of the code for 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();
        } });

edited Nov 26, 2010 at 6:50

answered Nov 26, 2010 at 6:05

austinbv

9,5116 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

iamchriswick Over a year ago

@zobgib: As you can see from the code, the control down is bound to SELECT element on the page which isn't hidden intentionally. This is meant to be hidden in the final code. The Country Dropdown (e.g. Brazil, France, India) is the only one wich is meant to be displayed when one first enter a page. Then when a selection is made from this dropdown (e.g. one of the countries) the dropdown with cities from the selected country will show.

iamchriswick Over a year ago

@zobgib: Great, that just what I was looking for :D Thank you! Now I would like this to work with the custom dropdownlist. Is it possible to do that?

austinbv Over a year ago

It looks to me like the custom drop down list works fine or do you want when you click in the classic <select> for the custom drop down to open as well?

iamchriswick Over a year ago

What I want is to have the same effect when I click in the custom dropdown as I get when I use the classic. Like having the "sub dropdown", e.g cities, to display when a selection from the country dropdown is made.

Collectives™ on Stack Overflow

Show/Hide <select> dropdown, with jQuery, based on value

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related