堆栈内存溢出
  繁体   English   中英

根据先前的选择下拉列表选项动态填充选择下拉列表并进行验证

[英]dynamically populate select dropdown depending from previous select dropdown choice and validate

 原文  2018-07-16 05:30:23  0   1    javascript/ function/ validation

问题描述

我一直在尝试获得功能； switchState（）“用于验证输入。

我在创意领域的专长，因此被驱使者试图使其正常工作。

它应该如何运行； 从下拉菜单“状态”中进行选择，然后用户必须输入邮政编码。 根据选择的状态进行验证，如果正确则显示绿色背景，否则显示红色。

我相信有人可以帮助我。

提前非常感谢...

html如下： 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>Country:
    <select class="uk-form-select" name="country" id="country" type="text" placeholder="select country first">
      <option value="0">select country</option>
      <option value="AU">Australia</option>
      <option value="NZ">New Zealand</option>
    </select>
  </div>
  <div>State:
    <select type="text" name="state" id="state" placeholder="select state" onchange="return stateColours()">
      <optgroup label="Aust States">
        <option value="0">select a state</option>
        <option value="SA">SA</option>
        <option value="NSW">NSW</option>
        <option value="VIC">VIC</option>
        <option value="ACT">ACT</option>
        <option value="TAS">TAS</option>
        <option value="QLD">QLD</option>
        <option value="NT">NT</option>
      </optgroup>
      <optgroup label="NZ States">NZ States
        <option value="AU">Auckland</option>
        <option value="NO">Northland</option>
        <option value="SO">Southland</option>
      </optgroup>
    </select>
  </div>
  <div class="uk-form-input">
    <label class="uk-form-label" id="postcodeLabel" name="postcodeLabel">Postcode:  
      <input class="uk-input" type="text" id="postcodeInput" name="postcodeInput" placeholder="0000" size="4" required="required" title="Postcode is incorrect for state" onblur="return validateErrors()" /> 
      <span class="uk-text-center" id="postcodeInputError" name="postcodeInputError" style="display: none;"></span>
    </label>
  </div>
</body>
</html>

JavaScript： 

function switchState() {
  var state = (document.getElementById("state").value);

  switch (state) {
    case "SA":
      var postcodeRegEx = /^5[0-9]{3}$/;
      break;
    case "NSW":
      var postcodeRegEx = /^2[0-9]{3}$/;
      break;
    case "VIC":
      var postcodeRegEx = /^3[0-9]{3}$/;
      break;
    case "ACT":
      var postcodeRegEx = /^3[0-9]{3}$/;
      break;
    case "QLD":
      var postcodeRegEx = /^4[0-­9]{3}$/;
      break;
    case "NT":
      var postcodeRegEx = /^08[0-9]{2}$/;
      break;
    case "TAS":
      var postcodeRegEx = /^7[0-9]{3}$/;
      break;
  }
  if (!postcodeRegEx.test(document.getElementById("postcodeInput").value))  {   //failure
    postcodeInput.style.background = '#FF9999';
    postcodeInputError.style.display = "block";
    postcodeInputError.innerHTML = postcodeInput.title;
    postcodeInput.focus();
    return  false;
  } 
  else  {
    //success
    postcodeInput.style.background = '#CCFFCC';
    postcodeInputError.style.display = "none";
    return  true; 
  }

1 个解决方案

解决方案1
 0  2018-07-16 05:55:37

您应该在更改时绑定事件，并调用另一个检查国家/地区选择值的函数，并根据其值显示隐藏optgroup 。 您可以使用querySelector获取正确的optgroup元素。

您会注意到，我已经删除了onchange作为内联属性，而是使用了addEventListener 。 这是更清晰的解决方案，您将所有js代码都放在一个地方。

另外，您已经在内联onchange调用中调用了stateColours，并在switchState中进行了调用，所以我在两个地方都只更改了一个函数名，因为它看起来像是同一函数。 

 var countrySelect = document.getElementById("country"); var stateSelect = document.getElementById("state"); var postCodeInput = document.getElementById("postcodeInput"); countrySelect.addEventListener('change', showHideOptGroup); stateSelect.addEventListener('change', stateColours); postCodeInput.addEventListener('blur', validateErrors); showHideOptGroup(); //call it initially to hide all optgroups function showHideOptGroup(){ var country = (document.getElementById("country").value); var stateSelect = document.querySelector("#state"); var AUOptGroup = stateSelect.querySelector('optgroup[label="Aust States"]'); var NZOptGroup = stateSelect.querySelector('optgroup[label="NZ States"]'); if(country === 'AU'){ AUOptGroup.style.display = "block"; }else{ AUOptGroup.style.display = "none"; } if(country === 'NZ'){ NZOptGroup.style.display = "block"; }else{ NZOptGroup.style.display = "none"; } if(country === '0'){ NZOptGroup.style.display = "none"; AUOptGroup.style.display = "none"; } } function stateColours(){ //you have called it stateColours in inline onchange call, and switchState, so I have unified it var state = (document.getElementById("state").value); switch (state) { case "SA": postcodeRegEx=/^5[0-9]{3}$/; break; case "NSW": postcodeRegEx=/^2[0-9]{3}$/; break; case "VIC": postcodeRegEx=/^3[0-9]{3}$/; break; case "ACT": postcodeRegEx=/^3[0-9]{3}$/; break; case "QLD": postcodeRegEx=/^4[0-9]{3}$/; break; case "NT": postcodeRegEx=/^08[0-9]{2}$/; break; case "TAS": postcodeRegEx=/^7[0-9]{3}$/; break; default: postcodeRegEx = ''; //I have set it as default, since it looks like you haven't finished your switch statement for NZ states, so it doesn't throw errors below when calling test } if(postcodeRegEx!== undefined && postcodeRegEx!= '' && !postcodeRegEx.test(document.getElementById("postcodeInput").value)) //just remove first two checks for empty and undefined { //failure postcodeInput.style.background='#FF9999'; postcodeInputError.style.display="block"; postcodeInputError.innerHTML=postcodeInput.title; postcodeInput.focus(); return false; } else { //success postcodeInput.style.background='#CCFFCC'; postcodeInputError.style.display="none"; return true; } } //you haven't provided this code, but I have placed it, since it causes errors when it is called onblur function validateErrors(){ } 
 <div>Country: <select class="uk-form-select" name="country" id="country" type="text" placeholder="select country first"> <option value="0">select country</option> <option value="AU">Australia</option> <option value="NZ">New Zealand</option> </select> </div> <div>State: <select type="text" name="state" id="state" placeholder="select state"> <optgroup label="Aust States"> <option value="0">select a state</option> <option value="SA">SA</option> <option value="NSW">NSW</option> <option value="VIC">VIC</option> <option value="ACT">ACT</option> <option value="TAS">TAS</option> <option value="QLD">QLD</option> <option value="NT">NT</option> </optgroup> <optgroup label="NZ States">NZ States <option value="AU">Auckland</option> <option value="NO">Northland</option> <option value="SO">Southland</option> </optgroup> </select> </div> <div class="uk-form-input"> <label class="uk-form-label" id="postcodeLabel" name="postcodeLabel">Postcode: <input class="uk-input" type="text" id="postcodeInput" name="postcodeInput" placeholder="0000" size="4" required="required" title="Postcode is incorrect for state"/> <span class="uk-text-center" id="postcodeInputError" name="postcodeInputError" style="display: none;"></span> </label> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 动态填充select2下拉列表 如何根据另一个下拉菜单的选择填充多个下拉菜单 无法使用来自所选国家/地区的州动态填充下拉菜单 jquery - 如何动态填充下拉列表/选择/组合框？ 根据选择下拉菜单将输入字段更改为禁用或启用 填充选择下拉列表 填充下拉列表选择 jQuery填充选择下拉列表 AngularJS：根据对第一个选择下拉列表的选择来填充第二个选择下拉列表 javascript验证选择下拉列表
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM