SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    On select of drop down, another drop down appears

    I am working on the code below as I have a need to have a certain drop down to appear on select on a value in the drop down before.

    The code below is the basic option, but for some reason, its not working, am I missing something as below is every bit of the code related to it, I havent added anything else in relation to it.

    Its at the bottom:
    http://www.whhazardreport.co.uk/mana...tail.php?ID=66

    Code:
    <select id = "opts" onchange = "showForm()">
    <option value = "0">Select Option</option>
    <option value = "1">Option 1</option>
    <option value = "2">Option 2</option>
    </select>
    
    <div id = "f1" style="display:none">
    <select id = "opts" onchange = "showForm()">
    <option value = "0">Select Option</option>
    <option value = "1">Option 5</option>
    <option value = "2">Option 6</option>
    </select>
    </div>
    
    <div id = "f2" style="display:none">
    <select id = "opts" onchange = "showForm()">
    <option value = "0">Select Option</option>
    <option value = "1">Option 3</option>
    <option value = "2">Option 4</option>
    </select>
    </div>
    
    <script type = "text/javascript">
    function showForm(){
    var selopt = document.getElementById("opts").value;
    if (selopt == 1) {
    document.getElementById("f1").style.display="block";
    document.getElementById("f2").style.display="none";
    }
    if (selopt == 2) {
    document.getElementById("f2").style.display="block";
    document.getElementById("f1").style.display="none";
    }
    }
    
    </script>

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code seems fine, but its either not reading the value or the changing of the display value isnt working, but it seems to be fine.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK have made a little progress by using document.write

    Code:
    <script type = "text/javascript">
    function showForm(){
    document.write('lee');
    
    var selopt = document.getElementById("opts").value;
    if (selopt == 1) {
    document.write('lee1');
    document.getElementById("f1").style.display="block";
    document.getElementById("f2").style.display="none";
    }
    if (selopt == 2) {
    document.write('lee2');
    document.getElementById("f2").style.display="block";
    document.getElementById("f1").style.display="none";
    }
    }
    </script>
    I can get lee to appear, but neither lee1 or lee2 works, so it knows called showForm, but the value isnt being read and so nothing is happening

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Ive sorted it out now.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •