时间戳

首页 > 解决方案 > Java根据从下拉菜单中选择的选项设置文本框的最大值和最小值

javascript - Java根据从下拉菜单中选择的选项设置文本框的最大值和最小值

问题描述

这是我的html代码：

<!DOCTYPE html>
<html>
<head>
<script>
function Check(e) {
  var text=document.getElementById("text");
  var inputnum = document.getElementById("number");
  if (e.value == "option1") {
    inputnum.min = "5";
    inputnum.max = "10";
    text.innerHTML ="input the value from 5 to 10";
  } else if (e.value == "option2") {
    inputnum.min = "20";
    inputnum.max = "30";
    text.innerHTML ="input the value from 20 to 30";
  }
}
</script>
</head>
<body>


<select id="selectMe" onChange="Check(this);">
   <option value=""></option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>
<br><br><br>

<input name="number" type= "number" id="number">
<p id="text"></p>
</input>

</body>
</html>

我需要对此代码进行少量修改，它根据从下拉列表中选择的选项设置数字输入框的最小值和最大值。

例如：如果用户选择 option1，则最小值必须为 5，最大值为 10。类似地，如果用户选择 option2，则最小值必须为 10，最大值为 20。它还应该显示消息（在 html 下方文本框（不是警告消息）显示请输入从 xxx 到 xxx 的值

请帮我解决一下这个。先感谢您。

标签： javascripthtmljquery

解决方案

请参阅我的示例，当SelectBox更改（因此使用 onChange）时，活动a函数检查selectbox的值，然后更改输入的最小/最大值

  var text=document.getElementById("text");
  var inputnum = document.getElementById("number");
window.onload = function() { inputnum.disabled=true; text.innerHTML =""; };
function Check(e) {

  if (e.value == "option1") {
    inputnum.disabled=false;
    inputnum.min = "5";
    inputnum.max = "10";
    text.innerHTML ="input the value from 5 to 10";
  } else if (e.value == "option2") {
    inputnum.disabled=false;
    inputnum.min = "20";
    inputnum.max = "30";
    text.innerHTML ="input the value from 20 to 30";
  } else if (e.value == "empty"){
  inputnum.disabled=true;
  text.innerHTML ="";
  
  }
}
<select id="selectMe" onChange="Check(this);">
  <option value="empty"></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
</select>
<br /><br /><br />

<input name="number" type="number" id="number" />
<p id="text"></p>

该函数必须在<script></script>标签中。

在评论后添加：

我添加了 onload 功能，其中页面加载输入被禁用。

推荐阅读