Results 1 to 3 of 3

Thread: HTML dropdown update without reload

  1. #1
    Join Date
    Apr 2007
    Location
    Prishtina, Kosovo
    Beans
    192
    Distro
    Kubuntu 18.04 Bionic Beaver

    HTML dropdown update without reload

    I have dropdown1 and I need it when it changes to change the list of dropdown2 without page reloading ? Thank you in advance.

  2. #2
    Join Date
    Mar 2007
    Location
    Your Closet
    Beans
    380
    Distro
    Ubuntu 10.04 Lucid Lynx

    Re: HTML dropdown update without reload

    By dropdown I think you're talking about the option and select elements. In any case hiding the elements somewhere then replacing them with javascript should do it.
    PHP Code:
    <body>
        <
    select onchange="change(this)">
            <
    option value="a">aaaaaaaaaaa</option>
            <
    option value="b">bbbbbbbbbbb</option>
            <
    option value="c">ccccccccccc</option>
            <
    option value="d">ddddddddddd</option>
        </
    select>

        <
    select id="a">
            <
    option value="a">aaaaaaaaaaa</option>
            <
    option value="b">aaaaaaaaaaa</option>
            <
    option value="c">aaaaaaaaaaa</option>
            <
    option value="d">aaaaaaaaaaa</option>
        </
    select>

        <
    div id="hidden" style="display: none">
            <
    select id="b">
                <
    option value="a">bbbbbbbbbbb</option>
                <
    option value="b">bbbbbbbbbbb</option>
                <
    option value="c">bbbbbbbbbbb</option>
                <
    option value="d">bbbbbbbbbbb</option>
            </
    select>

            <
    select id="c">
                <
    option value="a">ccccccccccc</option>
                <
    option value="b">ccccccccccc</option>
                <
    option value="c">ccccccccccc</option>
                <
    option value="d">ccccccccccc</option>
            </
    select>

            <
    select id="d">
                <
    option value="a">ddddddddddd</option>
                <
    option value="b">ddddddddddd</option>
                <
    option value="c">ddddddddddd</option>
                <
    option value="d">ddddddddddd</option>
            </
    select>
        </
    div>

        <
    script>
            function 
    change(element) {
                var 
    oldelement document.getElementsByTagName("select")[1];
                var 
    newelement document.getElementById(element.value);
                var 
    hidden document.getElementById("hidden");
                
    document.body.replaceChild(newelementoldelement);
                
    hidden.appendChild(oldelement);
            }
        
    </script>
    </body> 

  3. #3
    Join Date
    Apr 2007
    Location
    Prishtina, Kosovo
    Beans
    192
    Distro
    Kubuntu 18.04 Bionic Beaver

    Re: HTML dropdown update without reload

    Thank you very much, I think i google it wrong.

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
  •