-1

If the user selects "House" I want a new select option box to pop up. Currently nothing is happening.

function showFamilies(){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}


<select id="pt" value="pt" name="pt" onChange="showFamilies()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families: 
<select name="amin_families">
<option value="1" name="Condo">1</option>
<option value="2" name="Co-Op">2</option></select>
</div>
8
  • 1
    Are you sure? Its working in my browser. Did you use script tags? Aug 26, 2013 at 5:45
  • 2
    Use if(expression) statement; else statement2; instead of if(expression) statement; if(!expression) statement2;
    – BLaZuRE
    Aug 26, 2013 at 5:45
  • jsbin.com/AsoMaSO Your code is working. Aug 26, 2013 at 5:46
  • @Mike , i have checked your code and for me its working fine , when user select house , family dropdown show perfectaly ? OR you want something else to do ? Aug 26, 2013 at 5:48
  • 2
    @Phil They do it since ever, but I really do not recommend using it that way. I just copied his code into a jsbin to see, if it is working. Either I would use document.getElementById or use jQuery. Aug 26, 2013 at 5:51

3 Answers 3

4

pt in your showFamilies function is potentially undefined (depending on your browser's interpretation of http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-object). Try

function showFamilies(pt) {
    document.getElementById('families').style.display = pt.selectedIndex === 1
        ? 'block' : 'none';
}

and in your HTML

<select id="pt" name="pt" onchange="showFamilies(this)">

P.S. The <select> element does not have a value attribute.

1

Redefined your if statement. It works fine now.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    function showFamilies(pt){

    if(pt.selectedIndex == 1)
    {
    document.getElementById('families').style.display = 'block';
    }
    else
    {
    document.getElementById('families').style.display = 'none';
    }
    }
    </script>
    <title></title>
</head>
<body>



<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">
    <option value="" name="">Select</option>
    <option value="1" name="1">House</option>
    <option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families:
    <select name="amin_families">
        <option value="1" name="Condo">1</option>
        <option value="2" name="Co-Op">2</option></select>
</div>
</body>
</html>
5
  • Redefined what loop?
    – Phil
    Aug 26, 2013 at 5:55
  • 2
    It didn't work and you accepted the answer? Maybe you should show us the full code Aug 26, 2013 at 6:04
  • @Raubi, OP didn't enclose the JS in script tags. That was the actual problem. Read the comments. Aug 26, 2013 at 6:06
  • 1
    @Mike why u accepted this as ans as u hv only commented its does not work,Accepted the proper ans so that users can get the appropriate ans .i think phil ans is most appropriate Aug 26, 2013 at 6:08
  • @ShankarDamodaran That does not appear to be the problem at all. The comments suggest the OP used an incorrect src attribute in his <script> tag
    – Phil
    Aug 26, 2013 at 6:16
1

U have to pass this

<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">

Your Script:

function showFamilies(pt){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}
1
  • in your case pt is undefined i think? Aug 26, 2013 at 5:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.