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

Question

我想在选择相关的dropdown 时验证textfield。 通常它应该被允许提交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">

应该是必需的，而像 <input name="blue" id="blue" type="text"><input name="green" id="green" type="text"> 这样的其他人可以作为 null 发送，反之亦然。

文本字段应作为所选选项的完整详细信息，因此应对应。

有没有办法用 javascript 来处理这个问题？

Answer 1

<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>

https://jsfiddle.net/d0ep6z16/

Answer 2

https://jsfiddle.net/yce3Ljpf/1/

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

<input name="blue" id="red" type="text" class="color-input">
<input name="blue" id="blue" type="text" class="color-input">
<input name="green" id="green" type="text" class="color-input">

<script>
document.getElementById('colors').addEventListener("change", function() {
    if (this.value.length) {
    var inputs = document.getElementsByClassName("color-input");
    for(var i = 0; i < inputs.length; i++) {
      inputs.item(i).removeAttribute('required');
    }
    document.getElementById(this.value).setAttribute('required', 'required');
  }
});
</script>

Answer 3

好的，我已经把它列出来了，这样你就可以看到发生了什么：

<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>

当下拉列表的值改变时，文本框中的值设置为与下拉列表相同。如果他们随后转到文本字段并尝试更改颜色，它会将下拉菜单默认设置为默认设置，这意味着您只能拥有一个或另一个。

只需在选择下拉列表等时清除文本字段即可使其更简洁，但它为您提供了一些可以使用的东西。

https://jsfiddle.net/cx1x2txu/

Answer 4

我修改了它并做对了。谢谢大家

<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>