在html文本框中显示下拉按钮的值

Question

在此处输入图片说明，我想通过单击下拉菜单，在文本框中的下拉菜单中依次显示字符串。 我已经尝试过了，但是似乎没有用。 我也不希望用户能够键入输入，只能单击并显示。 这是我的代码

 var mytextbox = document.getElementById('display'); var mydropdown = document.getElementById('dropdown0'); mydropdown.onchange = function() { mytextbox.value = this.value; //to change the value } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form method="POST" action="addprocess.php"> <fieldset> <legend align="center">Semester Courses</legend> <br> <br> <div class="row"> <label style="font-family: verdana; font-size: 25px;">&emsp;&emsp;&emsp;BIOLOGY&emsp;</label> <div class="col-lg-4"> <div class="input-group"> <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-btn"> <button type="button" id="dropdown0" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Click to Select </button> <div class="dropdown-menu dropdown-menu-right"> <option class="dropdown-item" value="BIOL 8803">BIOL 8803</option> <div role="separator" class="dropdown-divider"></div> <option class="dropdown-item" value="BIOL 8805">BIOL 8805</option> <div role="separator" class="dropdown-divider"></div> <option class="dropdown-item" value="BIOL 8807">BIOL 8807</option> <div role="separator" class="dropdown-divider"></div> <option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option> </div> </div> </div> </div> </div> <br> <br> <input name="submit" type="submit" value="click to submit"> <input name="reset" type="reset" value="Reset"> </fieldset> </form> 

非常感谢您的帮助，我对此并不了解，我从引导网站复制了其中的一部分

我在浏览器上运行时的代码外观

Answer 1

通过非常快速的编辑，您可以完成此操作。 首先，我们在您的文本字段中添加“只读”。 然后，我们摆脱了怪异的按钮，将div更改为select，并为其指定dropdown0 id：

<form method = "POST" action = "addprocess.php">
 <fieldset>
  <legend align="center">Semester Courses</legend><br><br>
   <div class="row"><label style="font-family: verdana; font-size: 25px;">&emsp;&emsp;&emsp;BIOLOGY&emsp;</label>
    <div class="col-lg-4">
     <div class="input-group">
      <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly>
       <div class="input-group-btn">

    <select id="dropdown0" class="dropdown-menu dropdown-menu-right">
      <option class="dropdown-item" value="BIOL 8803">BIOL 8803</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" value="BIOL 8805">BIOL 8805</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" value="BIOL 8807">BIOL 8807</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option>

         </select>
       </div>
      </div>
     </div>
    </div><br><br>
   <input name="submit" type ="submit" value="click to submit">
  <input name="reset" type ="reset" value="Reset">
 </fieldset>
</form>

<script type="text/javascript">
    var mytextbox = document.getElementById('display');
    var mydropdown = document.getElementById('dropdown0');

    mydropdown.onchange = function(){
          mytextbox.value = this.value; //to change the value
}
</script>

在此处查看其运行情况： https : //jsfiddle.net/3axnv2y9/

Answer 2

Ebi，此答案是根据我先前提交的内容进行编辑的。 重要的是，我提到的是，我使用的大多数代码来自“ Gray ”提供给我的答案。 因此，如果您或其他任何人都想赞成这个答案， 请也赞成或反对“灰色”的答案 。

就是说，根据您提供的屏幕截图，我认为答案是“灰色”功能与“样式”标签的结合。

就像以前那样...

首先-我将为您提供一些结果截图。 第一张照片将关闭下拉菜单，第二张照片将打开下拉菜单。

第二-我将为您提供我使用的代码，该代码受提供的答案“灰色”的影响很大（如复制和粘贴）。

第三-我将解释代码。

开始....

*******屏幕截图*******

******* 编码 *******

    <!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Semester Course</title>
    <style>
      .form-control {
        position: relative;
        float: left;
      }

      .dropdown-menu {
        height: 22px;
        background: blue;
        color: white;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
      }

      .dropdown-item {
        background: white;
        color: black;

      }
    </style>
</head>

<body>

<form method = "POST" action = "addprocess.php">
 <fieldset>
  <legend align="center">Semester Courses</legend><br><br>
   <div class="row"><label style="font-family: verdana; font-size: 25px;">&emsp;&emsp;&emsp;BIOLOGY&emsp;</label>
    <div class="col-lg-4">
     <div class="input-group">
      <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly>
       <div class="input-group-btn">

    <select id="dropdown0" class="dropdown-menu dropdown-menu-right">
      <option class="dropdown-item" value="BIOL 8803">BIOL 8803</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" value="BIOL 8805">BIOL 8805</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" value="BIOL 8807">BIOL 8807</option>
      <div role="separator" class="dropdown-divider"></div>
      <option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option>

         </select>
       </div>
      </div>
     </div>
    </div><br><br>
   <input name="submit" type ="submit" value="click to submit">
  <input name="reset" type ="reset" value="Reset">
 </fieldset>
</form>

<script type="text/javascript">
    var mytextbox = document.getElementById('display');
    var mydropdown = document.getElementById('dropdown0');

    mydropdown.onchange = function(){
          mytextbox.value = this.value; //to change the value
}
</script>

</body>

</html>

*******说明*******

就像我未编辑的答案以及“灰色”的答案一样，您仍然需要使用HTML“选择”标签。 “选择”标签允许您使用一个下拉菜单，其中包含您想要的任意多个选择。 但是，您会注意到，在html文件的“头部”中，我留下了带有某些样式属性的“样式标签”。

我相信您评论过您想要一个按钮，因此我以与您发送的屏幕截图近似的样式在文本框旁边设置了选择框的样式。 然后，我给文本框指定了一个“相对”位置，并将其浮动到左边。 这将选择框置于文本框旁边。

“灰色”提供的javascript功能将保留，因此您最终得到的代码的行为类似于屏幕快照中所描述的内容，并且具有相对样式。 如果样式是主要问题，那么您只需要弄乱我在标头中提供的CSS代码即可。

如果您不太确定如何在CSS中进行编码，则建议您使用以下两种方法之一。 他们是：

1）访问此链接： www.w3schools.com/css/css_form.asp

您可能已经听说过该网站，但是它很棒，我从中了解到很多东西，并且有时仍用作参考。

2）如果您在屏幕快照中提供的示例来自一个正常工作的网站，则您实际上可以使用Google Developer Tools查看该站点的作者使用的代码，并且可以复制他们所做的工作并通过反向工程学到什么他们做到了。 这就是我学习如何做很多现在可以做的事情的方式。

希望我们能更接近您的需求。