Javascript 选择列表/菜单选项时，需要一个文本字段_Javascript_Php_Html_Jquery Ui

Javascript 选择列表/菜单选项时，需要一个文本字段
javascript php html jquery-ui
Javascript 选择列表/菜单选项时，需要一个文本字段,javascript,php,html,jquery-ui,Javascript,Php,Html,Jquery Ui,我想在选择相关的下拉列表时验证文本字段。通常，应该允许提交null，但当选择其相关下拉菜单时，不应该允许提交null <select> <option></option> <option value="red">one</option> <option value="blue">two</option> <option value="green">three</option&g
我想在选择相关的
下拉列表时验证文本字段。
通常，应该允许提交null
，但当选择其相关下拉菜单时，不应该允许提交null

<select>
  <option></option>
  <option value="red">one</option>
  <option value="blue">two</option>
  <option value="green">three</option>
</select>


一
二
三

假设我从下拉列表中选择红色
<input name="red" id="red" type="text">



应该是必需的，而像
这样的其他代码可以作为null发送，反之亦然
文本字段应作为所选选项的完整详细信息，因此，它应相应
有没有办法用javascript处理这个问题？

<html>
  <head>
    <script>
      window.addEventListener('load',function(){ SimpleVal.init(); });
      var SimpleVal = {};
      SimpleVal.init = function(){
        this.form = document.getElementById("myForm");
        this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
        for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
        this.form.elements.namedItem("submit").disabled = true;
        let sel = this.form.elements.namedItem("select");
        this.form.addEventListener("change",function(){
          for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
          this.form.elements.namedItem("submit").disabled = true;
          if(sel.value){
            this.form.elements.namedItem(sel.value).disabled = false;
            if(this.form.elements.namedItem(sel.value).value)     this.form.elements.namedItem("submit").disabled = false;
          }
        }.bind(this));

      };
    </script>
  </head>
  <body>
    <form id='myForm'>
      <select name='select'>
        <option></option>
        <option value="red">one</option>
        <option value="blue">two</option>
        <option value="green">three</option>
      </select>
      <input name='red' type='text'/>
      <input name='blue' type='text'/>
      <input name='green' type='text'/>
      <input name='submit' type='submit'/>
    </form>
  </body>
</html>

addEventListener（'load'，function（）{SimpleVal.init（）；}）；
var SimpleVal={}；
SimpleVal.init=函数（）{
this.form=document.getElementById（“myForm”）；
this.textInputs=[this.form.elements.namedItem（“红色”），this.form.elements.namedItem（“蓝色”），this.form.elements.namedItem（“绿色”）；
对于（设i=0；i



一
二
三
document.getElementById（'colors'）.addEventListener（“更改”，函数（）{
if（this.value.length）{
var inputs=document.getElementsByClassName（“颜色输入”）；
对于（变量i=0；i
好的，我已经把它放好了，这样你就可以看到发生了什么：
<select id="colourSelect" onchange="val()">
    <option value="nothing">Please Choose:</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
</select>
<br><br>
<input type="text" id="colourTextInput" size="50" onkeyup="clearMe()">
<br><br>
<button type="submit">Submit Button</button>
<script>
    function val() {
        d = document.getElementById("colourSelect").value;
        if(d !== "nothing")
        {
            document.getElementById("colourTextInput").value = d;
        }
        else
        {
            document.getElementById('colourTextInput').value = "";
        }
    }
    function clearMe() {
        selectBox = document.getElementById("colourSelect");
        selectBox.selectedIndex = null;
    }
</script>


请选择：
蓝色
红色
绿色






提交按钮
函数val（）{
d=document.getElementById（“colorSelect”）.value；
如果（d！=“无”）
{
document.getElementById（“colorTextInput”）.value=d；
}
其他的
{
document.getElementById（'colorTextInput'）。value=“”；
}
}
函数clearMe（）{
selectBox=document.getElementById（“colorSelect”）；
selectBox.selectedIndex=null；
}

更改下拉列表的值时，文本框中的值将设置为与下拉列表相同。如果他们随后转到文本字段并尝试更改颜色，则下拉列表将默认为其默认设置，这意味着您只能使用其中一个
当选择下拉列表时，只需清除文本字段，即可使其变得更干净，但它给您一些工作的东西
我修改了这个，并且做对了。谢谢大家
<html><html>
  <head>
    <script>
      window.addEventListener('load',function(){ SimpleVal.init(); });
      var SimpleVal = {};
      SimpleVal.init = function(){
        this.form = document.getElementById("myForm");
        this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
        for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
        this.form.elements.namedItem("submit").disabled = true;
        let sel = this.form.elements.namedItem("select");
        this.form.addEventListener("change",function(){
          for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
          this.form.elements.namedItem("submit").disabled = true;
          if(sel.value){
            this.form.elements.namedItem(sel.value).disabled = false;
            if(this.form.elements.namedItem(sel.value).value)     this.form.elements.namedItem("submit").disabled = false;
          }
        }.bind(this));

      };
    </script>
  </head>
  <body>
    <form id='myForm'>
      <select name='select'>
        <option></option>
        <option value="red">one</option>
        <option value="blue">two</option>
        <option value="green">three</option>
      </select>
      <input name='red' type='text'/>
      <input name='blue' type='text'/>
      <input name='green' type='text'/>
      <input name='submit' type='submit'/>
    </form>
  </body>
</html>


addEventListener（'load'，function（）{SimpleVal.init（）；}）；
var SimpleVal={}；
SimpleVal.init=函数（）{
this.form=document.getElementById（“myForm”）；
this.textInputs=[this.form.elements.namedItem（“红色”），this.form.elements.namedItem（“蓝色”），this.form.elements.namedItem（“绿色”）；
对于（设i=0；i为清晰起见，如果用户从下拉列表中选择颜色，则文本字段提交的颜色必须提交相同的颜色？我想你是在试图阻止人们选择一个选择选项，然后通过文本字段向你发送不同的颜色？@Stephen正是我的目标快速而肮脏，但这就是你的意思吗？。。也许一个更简洁的方法是在下拉菜单上有一个“自定义颜色”按钮，当选中该按钮时，只会使文本框消失，或变成只读。如果选择相应的文本框，是否愿意隐藏其他文本字段，这将是一个更好的方法有没有办法做到这一点？我应该说“使文本框出现”选择“自定义”后，不会消失：）
<html><html>
  <head>
    <script>
      window.addEventListener('load',function(){ SimpleVal.init(); });
      var SimpleVal = {};
      SimpleVal.init = function(){
        this.form = document.getElementById("myForm");
        this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
        for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
        this.form.elements.namedItem("submit").disabled = true;
        let sel = this.form.elements.namedItem("select");
        this.form.addEventListener("change",function(){
          for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
          this.form.elements.namedItem("submit").disabled = true;
          if(sel.value){
            this.form.elements.namedItem(sel.value).disabled = false;
            if(this.form.elements.namedItem(sel.value).value)     this.form.elements.namedItem("submit").disabled = false;
          }
        }.bind(this));

      };
    </script>
  </head>
  <body>
    <form id='myForm'>
      <select name='select'>
        <option></option>
        <option value="red">one</option>
        <option value="blue">two</option>
        <option value="green">three</option>
      </select>
      <input name='red' type='text'/>
      <input name='blue' type='text'/>
      <input name='green' type='text'/>
      <input name='submit' type='submit'/>
    </form>
  </body>
</html>