Solved

Hide and show a list if it has some data

Posted on 2014-02-11
4
328 Views
Last Modified: 2014-02-11
Hi,

I am trying to do this:

When the user select from the Driver dropdown list the DriverSubList dropdown it will get populated.  So, it like a chaines between the two dropdown list.

my problem is when the user select from the Driver list it may not have a DriverSubList.  So I want the dropdown list for the DriverSubList not show if it has no Driver that belong to it.

So, if the DriverSubList has some value show it otherwise hide .


$("#SelectDriverSubType").chained("#SelectDriverType");


function CheckList()
{
	if( $('#SelectDriverSubType').val() === '' )
	{
		 $("#ShowHideDriverSubType").hide(); 
	}
	else 
	{
		$("#ShowHideDriverSubType").show(); 
	}
}

Open in new window



 <SELECT name="SelectDriverType" id="SelectDriverType" style="width:200px;" onchange="CheckList();"> 
             <OPTION>Select ...</OPTION>	
           <cfoutput query="QDriverType">
			<OPTION value="#QDriverType.DriverTypeID#">#QDriverType.Driver#</OPTION>
			 </cfoutput>
            </SELECT>       



 <SELECT name="SelectDriverSubType" id="SelectDriverSubType" style="width:200px;">
           <cfoutput query="QDriverSubType">
			<OPTION value="#QDriverSubType.DriverSubTypeID#" class="#QDriverSubType.DriverTypeID#">#QDriverSubType.DriverSubType#</OPTION>
			 </cfoutput>
            </SELECT>

Open in new window

0
Comment
Question by:lulu50
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39851053
If you're jQuery, you should stop to use inline event.
Test page : http://jsfiddle.net/Mj834/

$("#SelectDriverSubType").chained("#SelectDriverType");
$("#SelectDriverType").change(function() {
	if($(this).prop("selectedIndex"))
    {
		$("#SelectDriverSubType").show(); 
	}
    else
    {
		 $("#SelectDriverSubType").hide(); 
	}
}).change();

Open in new window


 <SELECT name="SelectDriverType" id="SelectDriverType" style="width:200px;" > 
             <OPTION>Select ...</OPTION>	
           <cfoutput query="QDriverType">
			<OPTION value="#QDriverType.DriverTypeID#">#QDriverType.Driver#</OPTION>
			 </cfoutput>
            </SELECT>       



 <SELECT name="SelectDriverSubType" id="SelectDriverSubType" style="width:200px;">
           <cfoutput query="QDriverSubType">
			<OPTION value="#QDriverSubType.DriverSubTypeID#" class="#QDriverSubType.DriverTypeID#">#QDriverSubType.DriverSubType#</OPTION>
			 </cfoutput>
            </SELECT>

Open in new window

0
 

Author Comment

by:lulu50
ID: 39851082
leakim971,

very close!

I want to hide the drop down list "SelectDriverSubType" when it doesn't have anything in the it's list.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39851118
Here an update version of the plugin...
You MUTS remove MY previous code
/*
 * Chained - jQuery / Zepto chained selects plugin
 *
 * Copyright (c) 2010-2013 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/chained
 *
 * Version: 0.9.9-dev
 *
 */

;(function($, window, document, undefined) {
    "use strict";

    $.fn.chained = function(parent_selector, options) {

        return this.each(function() {

            /* Save this to child because this changes when scope changes. */
            var child   = this;
            var backup = $(child).clone();

            /* Handles maximum two parents now. */
            $(parent_selector).each(function() {
                $(this).bind("change", function() {
                    updateChildren();
                });

                /* Force IE to see something selected on first page load, */
                /* unless something is already selected */
                if (!$("option:selected", this).length) {
                    $("option", this).first().attr("selected", "selected");
                }

                /* Force updating the children. */
                updateChildren();
            });

            function updateChildren() {
                var trigger_change = true;
                var currently_selected_value = $("option:selected", child).val();

                $(child).html(backup.html());

                /* If multiple parents build classname like foo\bar. */
                var selected = "";
                $(parent_selector).each(function() {
                    var selectedClass = $("option:selected", this).val();
                    if (selectedClass) {
                        if (selected.length > 0) {
                            if (window.Zepto) {
                                /* Zepto class regexp dies with classes like foo\bar. */
                                selected += "\\\\";
                            } else {
                                selected += "\\";
                            }
                        }
                        selected += selectedClass;
                    }
                });

                /* Also check for first parent without subclassing. */
                /* TODO: This should be dynamic and check for each parent */
                /*       without subclassing. */
                var first;
                if ($.isArray(parent_selector)) {
                    first = $(parent_selector[0]).first();
                } else {
                    first = $(parent_selector).first();
                }
                var selected_first = $("option:selected", first).val();

                $("option", child).each(function() {
                    /* Remove unneeded items but save the default value. */
                    if ($(this).hasClass(selected) && $(this).val() === currently_selected_value) {
                        $(this).prop("selected", true);
                        trigger_change = false;
                    } else if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") {
                        $(this).remove();
                    }
                });

                /* If we have only the default value disable select. */
                if (1 === $("option", child).size() && $(child).val() === "") {
                    $(child).attr("disabled", "disabled");
                } else {
                    $(child).removeAttr("disabled");
                }
                if (trigger_change) {
                    $(child).trigger("change");
                }
                if($("option:selected",child).length) {
                    $(child).show();
                }
                else {
                    $(child).hide();
                }
            }
        });
    };

    /* Alias for those who like to use more English like syntax. */
    $.fn.chainedTo = $.fn.chained;

    /* Default settings for plugin. */
    $.fn.chained.defaults = {};

})(window.jQuery || window.Zepto, window, document);

Open in new window

0
 

Author Closing Comment

by:lulu50
ID: 39851148
Thank  you
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS Divs in Safari 3 19
update field on focusout 15 22
What does this javascript do? 7 24
jqplot Pie Chart - javascript 2 13
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now