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

 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> 

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

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

#1楼 票数:2

通过非常快速的编辑,您可以完成此操作。 首先,我们在您的文本字段中添加“只读”。 然后,我们摆脱了怪异的按钮,将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/

#2楼 票数:1

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查看该站点的作者使用的代码,并且可以复制他们所做的工作并通过反向工程学到什么他们做到了。 这就是我学习如何做很多现在可以做的事情的方式。

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

  ask by ebi translate from so

未解决问题?本站智能推荐:

1回复

选择下拉值时,在文本框中显示状态

我有一个添加商店的功能。 在这个功能中,我可以选择商店是OPEN还是CLOSE 。 我的目标是,在我的另一个模态上, 当我创建一个用户并选择我创建的商店时,商店的状态是打开还是关闭将出现在我的文本框中。 我在下面提供了我的代码和我的屏幕截图。 任何帮助将不胜感激 HTML:
3回复

使用HTML/Javascript在表单文本框中显示单选按钮的值

如何在表单文本框中显示单选按钮的值? 我希望单击单选按钮时可以更改它。 这是我的单选按钮: 文本框: 非常感谢
4回复

如何使用JQuery在文本框中显示按钮的值?

对不起,如果这是一个简单的问题,我是Scripting,html和JQuery的新手。 我试图做到这一点,所以当按下1按钮时,它将在框中显示值。 我之前通过Get Element By Id实现了它,但是现在我正在使用Jquery尝试它,我感到困惑,为什么我的以下代码无法正常工作。 谢谢你
3回复

我如何获取按钮值以显示在文本框中

这是我的代码,如何获取按钮值以显示在文本框中。 我尝试了这个,但是没有用 这是我尝试过的小提琴的链接https://jsfiddle.net/mp5pndyw/
2回复

在javascript的html文本框中显示值

在我的代码中,我有三个单选按钮,如果用户选择一个单选按钮,然后单击“提交”按钮(name =“ generateQuestion”),它应根据用户的选择在文本框(name =“ quest”)中显示一些文本。 我的问题是,我从javascript中获得了一些价值,但它出现在html文本框中并立
3回复

在html文本框中,如何显示本身包含“”符号的值?

是否可以在html文本框标记中添加“”符号本身? 我的要求是这样的: 其中{"value": "!MYAPI!sdfg" }是文本框的值 有什么办法吗?
2回复

文本框显示/隐藏按钮单击和下拉填充

我正在做一个功能,当单击按钮时,将出现一个文本框,无论用户填写什么值,它都应该在该下拉列表中自动更新。 我尝试使用下面提到的代码,在其中隐藏/显示文本框,但无法填充下拉列表: 另请参见html的下拉列表,文本框和按钮:-
3回复

文本框中的按钮值

我有一个跟踪发货的模式,我想在按钮上输入在文本框中输入的值。 我已经尝试过了,但是没有用。 请帮助我找出错误。 <script> window.onload = function(){ document.getElementById('cno').addEventLi