JavaScript 检查 Select 选项是否被选中

Question

我在表单页面上有一个 select 元素，如果用户尝试提交而不进行选择，我希望更改标签的内部 html。这是html。

  <div class="form-group">

    <label for="FamilySize" name = "FamSizeLable">How Many in Your Household</label>

    <select class="form-control" name = "FamilySize" id="FamilySize">

      <option disabled selected value="">Size</option>

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

      <option>5</option>

      <option>Good god ya'll</option>

    </select>

  </div>

我尝试过以几种不同的方式获取价值。

  else if(!document.getElementById("FamilySize").value){

    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";

    document.getElementById("FamSizeLabel").style.color = "red";

    return false;

  }

和

  else if(!document.querySelector('[id = "FamilySize"]').value){

    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";

    document.getElementById("FamSizeLabel").style.color = "red";

    return false;

  }

和

  else if(document.querySelector('[id = "FamilySize"]').value==null){

    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";

    document.getElementById("FamSizeLabel").style.color = "red";

    return false;

  }

和

  else if(document.querySelector('[id = "FamilySize"]').value==""){

    document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***";

    document.getElementById("FamSizeLabel").style.color = "red";

    return false;

  }

我还尝试在开发人员视图中使用 console.log 来查看我遗漏了什么。但是，我对 JavaScript 非常菜鸟，似乎无法确定它。当未选择 FamilySize 时，表单仍会被提交。我可以抓住这个服务器端，但我正在努力在 JavaScript 方面变得更好，所以想弄清楚/理解这一点。

Answer 1

我已经编辑了我的原始帖子并包含了您的一些进一步输入元素。我目前使用该类form-control来决定必须检查哪些元素（您当然可以使用专门用于此目的的另一个类名）。然后我去使用Array.reduce()返回整体布尔值的方法检查它们。根据该值，进一步处理是否会发生......为了简化错误处理，我使用每个测试变量的名称作为错误消息，我在每个输入元素之后的额外 div 中显示该错误消息。var chk=Array.from(document.querySelectorAll('.form-control')),&nbsp; &nbsp; msg="You must enter a value for ";document.querySelector('#subm').addEventListener('click',&nbsp;function(){&nbsp;if (chk.reduce(function(ac,el){&nbsp; &nbsp;el.parentNode.querySelector('div.error').innerHTML=&nbsp; &nbsp; &nbsp;el.value=="" ? msg+el.name : "";&nbsp; &nbsp;return ac || el.value==""},&nbsp; &nbsp;false)) return false;&nbsp;console.log('OK, your data will be submitted ...');&nbsp;// and further code ...})div.error {color: red;}<div class="form-group">&nbsp; &nbsp; <label id = "EmailLabel" >Email address</label>&nbsp; &nbsp; <input type="email" class="form-control" name="Email"&nbsp;&nbsp; &nbsp; &nbsp;autocomplete = "off" autofocus id="FormControlInput1"&nbsp; &nbsp; &nbsp;placeholder="[e-mail]"><div class="error"></div>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <label id = "Fname" >First Name</label>&nbsp; &nbsp; <input type="text" class="form-control" name = "Fname" autocomplete = "off"&nbsp; id="FnameFormControlInput" placeholder="John"><div class="error"></div>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <label id = "Lname" >Last Name</label>&nbsp; &nbsp; <input type="text" class="form-control" name ="Lname" autocomplete = "off"&nbsp; id="LnameFormControlInput" placeholder="Doe"><div class="error"></div>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <label for="FamilySize">How Many in Your Household</label>&nbsp; &nbsp; <select class="form-control" name="FamilySize" id="FamilySize">&nbsp; &nbsp; &nbsp; <option disabled selected value="">Size</option>&nbsp; &nbsp; &nbsp; <option>1</option>&nbsp; &nbsp; &nbsp; <option>2</option>&nbsp; &nbsp; &nbsp; <option>3</option>&nbsp; &nbsp; &nbsp; <option>4</option>&nbsp; &nbsp; &nbsp; <option>5</option>&nbsp; &nbsp; &nbsp; <option>Good god ya'll</option>&nbsp; &nbsp; </select><div class="error"></div>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <label for="AgeGroup">Select Age Group</label>&nbsp; &nbsp; <select multiple class="form-control" name="AgeGroup" id="AgeGroup">&nbsp; &nbsp; &nbsp; <option>0-15</option>&nbsp; &nbsp; &nbsp; <option>16-24</option>&nbsp; &nbsp; &nbsp; <option>25-36</option>&nbsp; &nbsp; &nbsp; <option>37-45</option>&nbsp; &nbsp; &nbsp; <option>45-Dead</option>&nbsp; &nbsp; </select><div class="error"></div>&nbsp; </div>&nbsp;&nbsp; <button id="subm">submit</button>

Answer 2

要访问选定的元素值或它的innerHTML，可以使用以下方法：var e = document.getElementById("FamilySize");// For the option tag value attribute:var value = e.options[e.selectedIndex].value;// For the option text:var text = e.options[e.selectedIndex].text;getElementsByName 方法没有单一选项。要访问标签的内容，您应该使用：var labelInnerHTML = document.getElementsByName("FamSizeLable")[0].innerHTML另请注意，您的代码中有拼写错误：name = "FamSizeLable"应该：name = "FamSizeLabel"

Answer 3

我终于通过给我的标签一个 id 解决了这个问题&nbsp; <div class="form-group">&nbsp; <label for="FamilySize" name = "FamSizeLable" id = "FamSizeLable">How Many in Your Household</label>&nbsp; <select class="form-control" name="FamilySize" id="FamilySize">&nbsp; &nbsp; &nbsp; <option disabled selected value="">Size</option>&nbsp; &nbsp; &nbsp; <option>1</option>&nbsp; &nbsp; &nbsp; <option>2</option>&nbsp; &nbsp; &nbsp; <option>3</option>&nbsp; &nbsp; &nbsp; <option>4</option>&nbsp; &nbsp; &nbsp; <option>5</option>&nbsp; &nbsp; &nbsp; <option>Good god ya'll</option>&nbsp; &nbsp; </select>&nbsp; </div>然后修改我的 JavaScript 以选择选择器的 id 并检查值""：&nbsp; else if(document.querySelector('#FamilySize').value==""){&nbsp; &nbsp; //Here the # means id&nbsp; &nbsp; document.querySelector('#FamSizeLable').innerHTML = "***You Must Select a Family Size***";&nbsp; &nbsp; document.querySelector('#FamSizeLable').style.color = "red";&nbsp; &nbsp; return false;&nbsp; }