Javascript 根据以前的选择下拉列表选择和验证，动态填充选择下拉列表_Javascript_Function_Validation

Javascript 根据以前的选择下拉列表选择和验证，动态填充选择下拉列表

javascript function validation

Javascript 根据以前的选择下拉列表选择和验证，动态填充选择下拉列表,javascript,function,validation,Javascript,Function,Validation,我一直试图得到一个函数；切换状态以验证输入我在创意领域的专业知识让我疯狂地试图让它正常运作它应该如何运行；从下拉列表“状态”中进行选择，然后用户必须输入邮政编码。根据选择的状态进行验证，正确时显示绿色背景，不正确时显示红色背景我相信有人能帮助我非常感谢…a.马特 html格式如下： <!DOCTYPE html> <html> <head> </head> <body> <div>Country: &l

我一直试图得到一个函数；切换状态以验证输入

我在创意领域的专业知识让我疯狂地试图让它正常运作

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

我相信有人能帮助我

非常感谢…a.马特

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>

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

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

另外，您在内联onchange调用和switchState中调用了stateColors，所以我只能在两个位置上更改为一个函数名，因为看起来这是同一个函数

var countrySelect=document.getElementByIdcountry； var stateSelect=document.getElementByIdstate； var postCodeInput=document.getElementByIdpostcodeInput； countrySelect.addEventListener'change'，showHideOptGroup； stateSelect.addEventListener'change'，StateColors； postCodeInput.addEventListener'blur'，validateErrors； showHideOptGroup//最初调用它以隐藏所有OptGroup 函数showHideOptGroup{ var country=document.getElementByIdcountry.value； var stateSelect=document.queryselector状态； var AUOptGroup=stateSelect.querySelector'optgroup[label=Aust States]； var NZOptGroup=stateSelect.querySelector'optgroup[label=NZ States]；如果国家==='AU'{ AUOptGroup.style.display=块； }否则{ AUOptGroup.style.display=none； } ifcountry==“新西兰”{ NZOptGroup.style.display=块； }否则{ NZOptGroup.style.display=none； } ifcountry==“0”{ NZOptGroup.style.display=none； AUOptGroup.style.display=none； } } 函数stateColors{//您在内联onchange调用和switchState中调用了stateColors，所以我统一了它 var state=document.getElementByIdstate.value；开关状态 { 案例SA： postcodeRegEx=/^5[0-9]{3}$/；打破新南威尔士州案例： postcodeRegEx=/^2[0-9]{3}$/；打破案件受害者： postcodeRegEx=/^3[0-9]{3}$/；打破案例法： postcodeRegEx=/^3[0-9]{3}$/；打破案例QLD： postcodeRegEx=/^4[0-9]{3}$/；打破新界个案： postcodeRegEx=/^08[0-9]{2}$/；打破个案助教：邮政编码规则=/^7[0-9]{3}$/；打破违约： postcodeRegEx=；//我已将其设置为默认值，因为看起来您还没有完成新西兰州的switch语句，所以在调用test时它不会在下面抛出错误 } ifpostcodeRegEx！==undefined&&postcodeRegEx！=&&！postcodeRegEx.testdocument.getElementByIdpostcodeInput.value//只需删除前两个空和未定义检查 { //失败 postcodeInput.style.background='FF9999'； postcodeInputError.style.display=块； postcodeInputError.innerHTML=postcodeInput.title； postcodeInput.focus；返回false； } 其他的 { //成功 postcodeInput.style.background='CCFFCC'； postcodeInputError.style.display=无；返回true； } } //您还没有提供这段代码，但我已经放置了它，因为它在调用onblur时会导致错误函数验证错误{ } 国家：选择国家澳大利亚新西兰声明：选择一个状态沙特阿拉伯新南威尔士州维克行为助教昆士兰新界新西兰州奥克兰北国南国邮政编码：

什么是stateColors，在哪里调用switchState？@a.matt，代码中缺少一个函数validateErrors。我已经放置了一个解决方案，但您需要将其放入您的精确代码中。另外，有一个调用的函数不存在，还有一个根本没有被调用，但看起来只是重命名问题，它是同一个函数

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