Solved

jquery hide if select show if else

Posted on 2010-09-09
8
609 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

705 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

16 Experts available now in Live!

Get 1:1 Help Now