Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 810
iamchriswick Avatar asked Nov 26 '10 04:11

iamchriswick


People also ask

How to show/hide Div on dropdown selected using jQuery?

In this tutorial, learn how to show/hide div on dropdown selected. The short answer is: use the jQuery show () and hide () to show hide div based on select option value in jQuery. But, before you perform this, you need to first hide all the div items using CSS display:none.

How to create show/hide element based on selected option value using jQuery?

To Create show/hide an element based on dropdown selection or selected option value using the jQuery change () method it takes following steps:- Include the html code. Write the jQuery change () method.

How to conditionally show or hide elements based on dropdown select value?

dm-select-show is a tiny jQuery plugin for conditionally showing or hiding DOM elements based on the option value you selected in a dropdown select. 1. To get started, simply include the plugin's files after the latest jQuery library (slim build is recommended) is loaded. 2. Create a select box and associated content blocks as follows.

How do I show a Div in a drop down menu?

Show/Hide Div On Dropdown Selected Using jQuery. If you want to show/hide div on dropdown selected, use the jQuery show () and hide (). Before you perform show/hide div on dropdown selection, you need to hide them first using CSS display:none. The display of the div dynamically happen based on the click of the selected dropdown option.


1 Answers

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();
        } }); 
like image 57
austinbv Avatar answered Oct 15 '22 19:10

austinbv