Solved

jquery hide if select show if else

Posted on 2010-09-09
8
610 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

937 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

4 Experts available now in Live!

Get 1:1 Help Now