Question

我想在选择相关textfield时验证dropdown。通常应该允许提交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">这样的其他人可以作为空发送，反之亦然。

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

有没有办法用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>

选择列表/菜单选项时，需要创建文本字段

4 个答案: