Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery hide if select show if else

Posted on 2010-09-09
8
Medium Priority
?
621 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 800 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 1200 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
Suggested Courses

972 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