Question

以下是我的代码的链接：https://jsfiddle.net/zoyf35u9/2/ 我想让“日期”下拉列表下降而不是向上。如果打开下拉列表，我需要其他表单元素留在原位。

<meta charset="UTF-8"> 
<style>

</style>
<form action="/todo/ajouter/" method="post">
    <label for="newtodo">Que dois-je faire ?</label>
    <input type="text" name="newtodo" id="newtodo" autofocus />


    Priorité
    <select name="priorite">
        <option value=5>Très haute</option>
        <option value=4>Haute</option>
        <option value=3>Moyenne</option>
        <option value=2>Basse</option>
        <option value=1>Très basse</option>
    </select>

    Date
    <select  name = "day" onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()"  onblur="this.size=0;">
        <script language="javascript" type="text/javascript"> 
            for(var d=1;d<=31;d++)
            {
                document.write("<option>"+d+"</option>");
            }
        </script>
    </select>

    <input type="submit" name="envoyer" />
</form>

谢谢

Answer 1

制作下拉列表position的{{1}}：

fixed

和

<form action="/todo/ajouter/" method="post">
    <label for="newtodo">Que dois-je faire ?</label>
    <input type="text" name="newtodo" id="newtodo" size ="10" autofocus />


    Priorité
    <select name="priorite">
        <option value=5>Très haute</option>
        <option value=4>Haute</option>
        <option value=3>Moyenne</option>
        <option value=2>Basse</option>
        <option value=1>Très basse</option>
    </select>

    Date
    <select  name = "day" onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" id="date-dd"  onblur="this.size=0;">
        <script language="javascript" type="text/javascript"> 
            for(var d=1;d<=31;d++)
            {
                document.write("<option>"+d+"</option>");
            }
        </script>
    </select>

    <input type="submit" name="envoyer" />
</form>

Fiddle

Answer 2

修改下拉菜单和提交按钮的css。

我添加了一个提交按钮的课程

   <input type="submit" name="envoyer" class = "submitButton"/>

css更改：

#date-dd {
  position: fixed;
}
.submitButton {
  position:relative;
  left : 10%;
}

下拉列表上升 - Javascript

2 个答案: