0

down similar to this example seen below, once the user clicks the first drop-down, the second drop down underneath changes:

<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">
    <form name="form1">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 1A</option>
            <option value="2">Option 1B</option>
        </select>
    </form>
</div>

<div id="f2" style="display:none">
    <form name="form2">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 2A</option>
            <option value="2">Option 2B</option>
        </select>
    </form>
</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";
        }
        if (selopt == 0) {
            document.getElementById("f2").style.display = "none";
            document.getElementById("f1").style.display = "none";
        }
    }

The above code functions exactly as expected - however I will have over 100 different dropdowns and a lot of DB results from php and I could see this method meaning a lot of wasted mark-up. Is there a smarter way to achieve the same functionality as above?

TotalNewbie
  • 1,004
  • 5
  • 13
  • 25
  • 1
    I would suggest using AJAX. Each option in dropdown 1 would have a value that you would use to make a request to the server to get the results for dropdown 2. – NaNpx Apr 09 '14 at 22:36
  • ^could you give me an example would I have to echo each option? – TotalNewbie Apr 09 '14 at 22:38
  • or a small example of how to do so would be much appreciate - I know how to make AJAX calls - But I have never made a call to populate items on the page – TotalNewbie Apr 09 '14 at 22:42
  • If you know how to make an ajax call, just use the returned text/value to add items to the next dropdownlist using the js `.add()` method. – Goose Apr 09 '14 at 22:43
  • You'd make a request to the server with some sort of identifier for the server to use to get results. Server would most likely echo a json_encode(array('value1'=>'text1',...)) or something like that. On success of the request, empty dropdown 2 and append options based on the returned json object. – NaNpx Apr 09 '14 at 23:06
  • I had a similar question: http://stackoverflow.com/questions/21478799/doing-a-postback-without-autopostback Now this one isn't a duplicate, because mine was about ASP.NET, but maybe it will help give you an idea. – Mr Lister Apr 10 '14 at 08:05

0 Answers0