Solved

jquery hide if select show if else

Posted on 2010-09-09
8
611 Views
Last Modified: 2012-05-10
Hello,

I want to make is to that if the select 'Land' is chosen then it hides the bottom div "propForm" if it is not chosen then I want it to show of everyone else.

Thanks for your help,
Matt
<select class="input2" name="listing_type" id="lt">
<option value="For+Sale">For Sale</option>
<option value="For+Rent">For Rent</option>
</select></label><br /><br />

<span id="boxes2">
<span id="For+Rent">
<label>Property Type<span style="color:#F50">*</span><br />
<select class="input2" name="property_type" id="pt">
<option value="Condo / Townhome">Condo / Townhome</option>
<option value="Single Family">Single Family</option>
<option value="Mobile Home">Mobile Home</option>
</select></label>
</span>

<span id="For+Sale">
<label>Property Type<span style="color:#F50">*</span><br />
<select class="input2" name="property_type" id="pt">
<option value="Condo / Townhome">Condo / Townhome</option>
<option value="Single Family">Single Family</option>
<option value="Multi Family">Multi Family</option>
<option value="Mobile Home">Mobile Home</option>
<option value="Land">Land</option>
</select></label>
</span>
</span>

<script type="text/javascript">

$("#lt").change(function(){
      $("#boxes2").children("span").hide();
      $("span[id*='" + this.value + "']").show();
});
$("#lt").change();

</script>

<span id="formDiv">
<span id="propForm">
HIDE IF LAND IS SELECTED
</span>
</span>

<script type="text/javascript">

$("#pt").change(function(){
      $("#formDiv").children("span").hide();
      $("span[id*='" + this.value + "']").show();
});
$("#pt").change();

</script>

Open in new window

0
Comment
Question by:movieprodw
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33637167
what about :


$("#pt").change(function() {
if( $(this).attr("selectedIndex") != 0 ) 
    $("#propForm").hide();
else
    $("#propForm").show();
});

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33637328
You have two object with the same id, it not good. I set the second with pt2.

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$("#lt").change(function()	{
			$("#boxes2").children("span").hide();
			$("span[id*='" + this.value + "']").show();
		});
		$("#lt").change();
	/*	
		$("#pt").change(function(){
			$("#formDiv").children("span").hide();
			$("span[id*='" + this.value + "']").show();
		});
	*/
		$("#pt2").change(function() {
			if( $(this).attr("selectedIndex") != 0 ) {
				$("#propForm").hide();
			}
			else {
				$("#propForm").show();
			}
		});

		$("#pt2").change();
	});
	
</script>
</head>
<body>

<label>
<select class="input2" name="listing_type" id="lt">
	<option value="For+Sale">For Sale</option>
	<option value="For+Rent">For Rent</option>
</select>
</label>
<br />
<br />


<span id="boxes2">
    <span id="For+Rent">
        <label>Property Type<span style="color:#F50">*</span><br />
            <select class="input2" name="property_type" id="pt">
            <option value="Condo / Townhome">Condo / Townhome</option>
            <option value="Single Family">Single Family</option>
            <option value="Mobile Home">Mobile Home</option>
            </select>
        </label>
    </span>

    <span id="For+Sale">
        <label>Property Type<span style="color:#F50">*</span><br />
            <select class="input2" name="property_type" id="pt2">
                <option value="Condo / Townhome">Condo / Townhome</option>
                <option value="Single Family">Single Family</option>
                <option value="Multi Family">Multi Family</option>
                <option value="Mobile Home">Mobile Home</option>
                <option value="Land">Land</option>
            </select>
        </label>
    </span>
</span>

<span id="formDiv">
	<span id="propForm">HIDE IF LAND IS SELECTED!</span>
</span>


</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33637360
another using the class of the two selects : input2

$(".input2").change(function() {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$("#lt").change(function()	{
			$("#boxes2").children("span").hide();
			$("span[id*='" + this.value + "']").show();
		});
		$("#lt").change();
	/*	
		$("#pt").change(function(){
			$("#formDiv").children("span").hide();
			$("span[id*='" + this.value + "']").show();
		});
	*/
		$(".input2").change(function() {
			if( $(this).attr("selectedIndex") != 0 ) {
				$("#propForm").hide();
			}
			else {
				$("#propForm").show();
			}
		}).change();

	});
	
</script>
</head>
<body>

<label>
<select class="input2" name="listing_type" id="lt">
	<option value="For+Sale">For Sale</option>
	<option value="For+Rent">For Rent</option>
</select>
</label>
<br />
<br />


<span id="boxes2">
    <span id="For+Rent">
        <label>Property Type<span style="color:#F50">*</span><br />
            <select class="input2" name="property_type" id="pt">
            <option value="Condo / Townhome">Condo / Townhome</option>
            <option value="Single Family">Single Family</option>
            <option value="Mobile Home">Mobile Home</option>
            </select>
        </label>
    </span>

    <span id="For+Sale">
        <label>Property Type<span style="color:#F50">*</span><br />
            <select class="input2" name="property_type" id="pt2">
                <option value="Condo / Townhome">Condo / Townhome</option>
                <option value="Single Family">Single Family</option>
                <option value="Multi Family">Multi Family</option>
                <option value="Mobile Home">Mobile Home</option>
                <option value="Land">Land</option>
            </select>
        </label>
    </span>
</span>

<span id="formDiv">
	<span id="propForm">HIDE IF LAND IS SELECTED!</span>
</span>


</body>
</html>

Open in new window

0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 10

Expert Comment

by:bugada
ID: 33637406
A full working solution cleaned up.

Remember that SPAN is not a block element, you should use DIV instead.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function() {
		$("#lt").change(function() {
	      $("#boxes2>span").hide();
	      $("span[id*='" + $(this).val() + "']").show();
		});

		$("#ptfs").change(function(){
		   if ($(this).val() == "Land") {
		      $("#propForm").hide();
			} else {
			 	$("#propForm").show();
			}
		});
		
		$("span[id*='For+Rent']").hide();
		
		
	});
	
</script>
</head>
<body>
	<select class="input2" name="listing_type" id="lt">
	<option value="For+Sale">For Sale</option>
	<option value="For+Rent">For Rent</option>
	</select></label><br /><br />

	<span id="boxes2">
	<span id="For+Rent">
	<label>Property Type<span style="color:#F50">*</span><br />
	<select class="input2" name="property_type" id="ptfr">
	<option value="Condo / Townhome">Condo / Townhome</option>
	<option value="Single Family">Single Family</option>
	<option value="Mobile Home">Mobile Home</option>
	</select></label>
	</span>

	<span id="For+Sale">
	<label>Property Type<span style="color:#F50">*</span><br />
	<select class="input2" name="property_type" id="ptfs">
	<option value="Condo / Townhome">Condo / Townhome</option>
	<option value="Single Family">Single Family</option>
	<option value="Multi Family">Multi Family</option>
	<option value="Mobile Home">Mobile Home</option>
	<option value="Land">Land</option>
	</select></label>
	</span>
	</span>

	<span id="formDiv">
	<span id="propForm">
	HIDE IF LAND IS SELECTED
	</span>
	</span>

	<script type="text/javascript">



	</script>

</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:movieprodw
ID: 33637563
bugada,

That does work like i wanted, the only issue I see is that if you go to for sale > land, then change to for rent it still hides the fields, is there any way around that?

Thank you
0
 

Assisted Solution

by:tushar-mahajan
tushar-mahajan earned 200 total points
ID: 33637626
Hello,

Please check the following snap of code, i have change the id of one element.
<select class="input2" name="listing_type" id="lt">
<option value="For+Sale">For Sale</option>
<option value="For+Rent">For Rent</option>
</select></label><br /><br />

<span id="boxes2">
<span id="For+Rent">
<label>Property Type<span style="color:#F50">*</span><br />
<select class="input2" name="property_type" id="pt">
<option value="Condo / Townhome">Condo / Townhome</option>
<option value="Single Family">Single Family</option>
<option value="Mobile Home">Mobile Home</option>
</select></label>
</span>

<span id="For+Sale">
<label>Property Type<span style="color:#F50">*</span><br />
<select class="input2" name="property_type" id="ptype">
<option value="Condo / Townhome">Condo / Townhome</option>
<option value="Single Family">Single Family</option>
<option value="Multi Family">Multi Family</option>
<option value="Mobile Home">Mobile Home</option>
<option value="Land">Land</option>
</select></label>
</span>
</span>

<script type="text/javascript">

$("#lt").change(function(){
      $("#boxes2").children("span").hide();
      $("span[id*='" + this.value + "']").show();
});
$("#lt").change();

</script>

<span id="formDiv">
<span id="propForm">
HIDE IF LAND IS SELECTED
</span>
</span>

<script type="text/javascript">

$("#ptype").change(function(){
      $("#formDiv").children("span").hide();
      $("span[id*='" + this.value + "']").show();
	  if(this.value == 'Land'){
	  	$("#formDiv").children("span").show();
	  } else { 
	  	$("#formDiv").children("span").hide();
	  }
});
$("#ptype").change();

</script>

Open in new window

0
 

Expert Comment

by:tushar-mahajan
ID: 33637666
Sorry one mistake in my code above, Please refer this function

$("#ptype").change(function(){
      $("#formDiv").children("span").hide();
      $("span[id*='" + this.value + "']").show();
        if(this.value == 'Land'){
              $("#formDiv").children("span").hide();
        } else {
              $("#formDiv").children("span").show();
        }
});
$("#ptype").change();
0
 
LVL 10

Accepted Solution

by:
bugada earned 300 total points
ID: 33637790
Absolutely yes, try substituting the equivalent code in your source with this one:


$(document).ready(function() {
		$("#lt").change(function() {
	      $("#boxes2>span").hide();
	      $("span[id*='" + $(this).val() + "']").show();
	      if ($(this).val() == "For+Rent") {
	      	$("#propForm").show();
			} else {
			   if ($("#ptfs").val() == "Land") {
			     $("#propForm").hide();
				}
			}
		});

		$("#ptfs").change(function(){
		   if ($(this).val() == "Land") {
		      $("#propForm").hide();
			} else {
			 	$("#propForm").show();
			}
		});
		
		$("span[id*='For+Rent']").hide();
		
		
	});

Open in new window

0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…

810 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