Question

晚安，

您是否有人建议在不刷新页面的情况下动态添加下拉框？首先必须看不到下拉框，然后必须根据用户做出的选择使其可见。但是一个限制是它只能是Javascript，Php和/或html

Answer 1

您可以在下拉框样式中添加display:none，并添加一个onclick=document.getElemetById('myDropDownBox').style.disply = 'block'的链接以显示该框。

BUUUT ...最好是谷歌它，并了解更多关于这些东西。关于这方面有很多很酷的东西。

Answer 2

更简单的方法是包含HTML但隐藏，然后在适当的时候通过Javascript显示它。需要更多的deatails？

Answer 3

像往常一样将下拉列表添加到页面，只将其css设置为display:none，然后在单击一个框时，您可以在javascript中执行以下操作：

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

此jquery函数将添加一个平滑过渡以显示框

我也同意@Mohsen

BUUUT ...谷歌和谷歌最好了解更多关于这些东西。有关于这一点很多很酷的东西那里。

你可能只是在学习一些非常整洁的东西！要冒险并享受这个学习过程的阶段。

Answer 4

也许这是一个有用的例子。

<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>

添加DropDown而不刷新页面

4 个答案: