asked on

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

leakim971

what about :

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

Open in new window

leakim971

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

leakim971

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

bugada

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

movieprodw

ASKER

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

SOLUTION

tushar-mahajan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tushar-mahajan

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();

ASKER CERTIFIED SOLUTION

bugada

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial