jquery hide if select show if else

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

LVL 1
movieprodwAsked:
Who is Participating?
 
bugadaConnect With a Mentor Commented:
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
 
leakim971PluritechnicianCommented:
what about :


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

Open in new window

0
 
leakim971PluritechnicianCommented:
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Start This Course
 
leakim971PluritechnicianCommented:
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
 
bugadaCommented:
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
 
movieprodwAuthor Commented:
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
 
tushar-mahajanConnect With a Mentor Commented:
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
 
tushar-mahajanCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Advertise Here