时间戳

首页 > 解决方案 > JS按钮点击提示从文本到下拉菜单

javascript - JS按钮点击提示从文本到下拉菜单

问题描述

我有这个带有 JS 脚本的 HTML 代码，如果有人按下按钮，它将打开一个带有空白文本的弹出窗口（供用户输入详细信息），

我如何在弹出窗口中使用相同的代码，但只是用下拉菜单替换文本？（我不知道 JS，并尝试在 JS 脚本 \ 附近按钮上添加下拉菜单并调用该函数 - icant 使其工作）：

  <select name="username" id="username">
            <option value="R1">R1</option>
            <option value="R2">R2</option>
            <option value="R3">R3</option>
            <option value="R4">R4</option>
            <option value="R5">R5</option>
            <option value="R6">R6</option>
            <option value="R7">R7</option>
    </br>
    </select>

但它只是显示在按钮旁边，我在单击弹出窗口而不是空白文本后需要它，并且我需要它，因为该功能今天有效，它正在将它传递给我的值。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  /*padding: 60px 100px;*/
  text-align: center;
  text-decoration: none;
  /*display: inline-block;
  font-size: 20px;*/
  margin: 10px 20px;
  cursor: pointer;
  background-color: #555555;
  border-radius: 12px;
  transition-duration: 0.4s;
  width: 250px;
  height: 50px;
  font-size: 20px;
} /* Black */
.button:hover {
  background-color: #7B8288; /* Green */
  color: white;
}
.button_active {
  background-color: #19bf53; /* Green */
  color: white;
}
.button_timeout_soon {
  background-color: #F75858; /* Green */
  color: black;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}
#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body>

<ul>
<button class="button button" onclick="myFunction(form);openNav()">{{ button }}</button>
                                <input type="hidden" name="reason" id="myField" value=""/>
</ul>

<script>
function myFunction(frm) {
  var txt;
  var reason = prompt("Please enter username:");
  if (reason == null || reason == "") {
    txt = "CANCEL";
  } else {
    txt = reason;
  }
  frm.reason.value = txt; // 1st option
  return txt
}
</script>
</body>
</html>

标签： javascripthtml

解决方案

标准的 JS 提示不会削减它。您可能需要创建自己的模式，然后您可以添加一个下拉菜单。在此处查找更多信息：

如何使用下拉菜单创建 java 脚本提示

推荐阅读