Add DropDown without refreshing page

Good Evening,

Could one of you suggest a way to add a dropdown box dynamically without refreshing the page? The dropdown box must not be visible at first, it must then become visible later based on a choice made by the user. However one constraint is开发者_JS百科 it can only be Javascript, Php, and/or html

You can add display:none to your dropdown box style and add a link that have onclick=document.getElemetById('myDropDownBox').style.disply = 'block' to show the box.

BUUUT... it's best to Google it and learn more about this stuff. There is lots of cool stuff about this out there.

The easier way is to include the HTML but hidden, then display it via Javascript when appropiate. Need more deatails?

Add the dropdown to the page like normal, only set its css to display:none, then when a box is clicked, you can do something like this in javascript:

$("#MyBox").click(function(){
    $("#dropdown").show('fast');
});

This jquery function will add a smooth transition to show the box

I also agree with @Mohsen

BUUUT... it's best to Google it and learn more about this stuff. There is lots of cool stuff about this out there.

You might just be on the edge of learning some really neat stuff! Be adventurous and enjoy this stage of the learning process.

Maybe this is a useful example.

<style type="text/css">
.hidden { display:none }
</style>

<script type="text/javascript">
function show(element, value) {
    switch (element.name) {
        case 'select1':
            switch (value) {
                case '0':
                    document.getElementById('select2').style.display = 'none';
                    document.getElementById('select3').style.display = 'none';
                    break;
                case '1':
                    document.getElementById('select2').style.display = 'inline';
                    document.getElementById('select3').style.display = 'none';
                    break;
                case '2':
                    document.getElementById('select2').style.display = 'none';
                    document.getElementById('select3').style.display = 'inline';
                    break;
            }
            break;
    }
}
</script>

<form>
    <p id="select1">
        <label>Select 1:
            <select name="select1" onchange="show(this, this.value)">
                <option value="0">First</option>
                <option value="1">Second</option>
                <option value="2">Third</option>
            </select>
        </label>
    </p>
    <p id="select2" class="hidden">
        <label>Select 2:
            <select name="select2">
                <option>Option</option>
            </select>
        </label>
    </p>
    <p id="select3" class="hidden">
        <label>Select 3:
            <select name="select3">
                <option>Option</option>
            </select>
        </label>
    </p>
</form>