微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

选择下拉列表“必需”时出现问题

分类：编程问答

如何解决选择下拉列表“必需”时出现问题

我在 HTML 中使用“required”标签来验证输入。但是，我在选择时遇到了错误。它没有显示该选项，我也无法继续。

const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progresstext = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;

nextBtnFirst.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "-25%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progresstext[current - 1].classList.add("active");
  current += 1;
});
nextBtnSec.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "-50%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progresstext[current - 1].classList.add("active");
  current += 1;
});
nextBtnThird.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "-75%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progresstext[current - 1].classList.add("active");
  current += 1;
});
submitBtn.addEventListener("click",function() {
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progresstext[current - 1].classList.add("active");
  current += 1;
  setTimeout(function() {
    alert("Your Consultation Successfully Submitted");
    location.reload();
  },800);
});

prevBtnSec.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "0%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progresstext[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnThird.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "-25%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progresstext[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnFourth.addEventListener("click",function(event) {
  event.preventDefault();
  slidePage.style.marginLeft = "-50%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progresstext[current - 2].classList.remove("active");
  current -= 1;
});



let data = [{
    "id": 1,"name": "Management","parentid": 0
  },{
    "id": 2,"name": "Support",{
    "id": 3,"name": "Digital Business",{
    "id": 4,"name": "Cyber Security",{
    "id": 5,"name": "Infrastructure",{
    "id": 6,"name": "Network",{
    "id": 8,"name": "MDM Solution","parentid": 1
  },{
    "id": 9,"name": "IT Procurement",{
    "id": 10,"name": "vendor Management",{
    "id": 11,"name": "Managed servers,Network,Firewall",{
    "id": 12,"name": "Backup and Storage",{
    "id": 13,"name": "Email Management",{
    "id": 14,"name": "Microsoft Office Management",{
    "id": 15,"name": "Asset Management",{
    "id": 16,"name": "Network Management",{
    "id": 17,"name": "Communication Management",{
    "id": 21,"name": "Patch Management",{
    "id": 18,"name": "IT Helpdesk","parentid": 2
  },{
    "id": 19,"name": "Maintenance of Servers",{
    "id": 20,"name": "Network Maintenance","name": "Communication Maintenance",{
    "id": 22,"name": "disaster Recovery Testing and Support",{
    "id": 23,"name": "Pro-active Capacity Planning and Support",{
    "id": 24,"name": "Remote and Onsite Support",{
    "id": 25,"name": "Office 365 Migration","parentid": 3
  },{
    "id": 26,"name": "Managed Offsite Backups",{
    "id": 27,"name": "Azure Migration & Uplift",{
    "id": 28,"name": "SaaS Products Support ",{
    "id": 29,"name": "Microsoft Teams Setup",{
    "id": 30,"name": "SharePoint Configuration",{
    "id": 32,"name": "Risk Assessment","parentid": 4
  },{
    "id": 33,"name": "Cloud base & on prem SIEM Solution Implementation",{
    "id": 34,"name": "Vulnerability & penetration testing",{
    "id": 35,"name": "Cyber Security Incident Response Plan",{
    "id": 36,"name": "Cloud Security",{
    "id": 37,"name": "CyberArk PAM solution",{
    "id": 38,"name": "SME Upgrades and Consolidation","parentid": 5
  },{
    "id": 39,"name": "Dell Networking",{
    "id": 40,"name": "Data Centre Design",{
    "id": 41,"name": "Storage Design and Installation",{
    "id": 42,"name": "disaster Recovery Infrastructure",{
    "id": 43,"name": "Redundancy Planning","parentid": 6
  },{
    "id": 44,"name": "Internet and WAN Connectivity Design",{
    "id": 45,"name": "Cabling Design",{
    "id": 46,"name": "Network Switching Design and Scale",{
    "id": 47,"name": "Routing Design ",{
    "id": 48,"name": "Firewall Design and Maintenance ",{
    "id": 49,"name": "Fibre,Cat5,Cat6 and WiFi Planning and Installation",{
    "id": 50,"name": "Access Network Design ",{
    "id": 51,"name": "Automation Workflows and Software Development",{
    "id": 52,"name": "Campus Network Design",{
    "id": 53,"name": "ISP Network Design",]

function populateList(list,pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "--Select--";
  l.appendChild(topItem);
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item) {
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  })
}

function updateList(selList,thisList) {
  if (thisList.value != 0) {
    populateList(selList,Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s,"onchange");
    let scopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(scopy,s);
  }
}

function triggerEvent(e,trigger) {
  if ((e[trigger] || false) && typeof e[trigger] == 'function') {
    e[trigger](e);
  }
}


function loadList1() {
  populateList("list1",0);
}

window.onload = loadList1;



if (FullNameValue === '') {
  setErrorFor(FullName,FullName 'Full Name cannot be blank');
}
::selection {
  color: #fffef8;
  background: #4197a9;
}

.container {
  width: 750px;
  margin-left: 0px;
  text-align: center;
  border-radius: 5px;
  padding: 50px 35px 10px 35px;
}

.container header {
  font-size: 35px;
  font-weight: 600;
  margin: 0 0 30px 0;
  right: auto;
}

.container .form-outer {
  width: 100%;
  overflow: hidden;
  margin-left: 300px;
}

.container .form-outer form {
  display: flex;
  width: 600%;
}

.form-outer form .page {
  width: 25%;
  transition: margin-left 0.3s ease-in-out;
}

.form-outer form .page .title {
  text-align: left;
  font-size: 25px;
  font-weight: 500;
}

.form-outer form .page .field {
  width: 800px;
  height: 45px;
  margin: 90px 0;
  display: flex;
  position: relative;
}

form .page .field .label {
  position: absolute;
  top: -30px;
  font-weight: 500;
}

form .page .field input {
  height: 80%;
  width: 70%;
  border: 1px solid #33343d;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 18px;
}

form .page .field select {
  width: 80%;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
}

form .page .field button {
  width: 250px;
  height: calc(100% + 5px);
  border: none;
  background: #4197a9;
  margin-top: -10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s ease;
  margin-left: 10px;
  margin-right: 10px;
}

form .page .field button:hover {
  background: #000;
}

form .page .btns button {
  margin-top: -20px!important;
}

form .page .btns button.prev {
  margin-right: 10px;
  font-size: 17px;
}

form .page .btns button.next {
  margin-left: 20px;
}

.container .progress-bar {
  display: flex;
  user-select: none;
  left: 250px;
  position: relative;
}

.container .progress-bar .step {
  text-align: center;
  width: 100%;
  position: relative;
}

.container .progress-bar .step p {
  font-weight: 500;
  font-size: 18px;
  color: #000;
  margin-bottom: 8px;
}

.progress-bar .step .bullet {
  height: 28px;
  width: 28px;
  border: 2px solid #000;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  transition: 0.2s;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
}

.progress-bar .step .bullet.active {
  border-color: #4197a9;
  background: #4197a9;
}

.progress-bar .step .bullet span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.progress-bar .step .bullet.active span {
  display: none;
}

.progress-bar .step .bullet:before,.progress-bar .step .bullet:after {
  position: absolute;
  content: '';
  bottom: 11px;
  right: -51px;
  left: 50px;
  height: 3px;
  width: 100px;
  background: black;
}

.progress-bar .step .bullet.active:after {
  background: #4197a9;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 0.3s linear forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.progress-bar .step:last-child .bullet:before,.progress-bar .step:last-child .bullet:after {
  display: none;
}

.progress-bar .step p.active {
  color: #d43f8d;
  transition: 0.2s linear;
}

.progress-bar .step .check {
  position: absolute;
  left: 50%;
  top: 70%;
  font-size: 15px;
  transform: translate(-50%,-50%);
  display: none;
}

.progress-bar .step .check.active {
  display: block;
  color: #fffef8;
}
<div class="progress-bar">
  <div class="step">
    <p>
      Name</p>
    <div class="bullet">
      <span>1</span>
    </div>
    <div class="check fas fa-check">
    </div>
  </div>
  <div class="step">
    <p>
      Contact</p>
    <div class="bullet">
      <span>2</span>
    </div>
    <div class="check fas fa-check">
    </div>
  </div>
  <div class="step">
    <p>
      Service</p>
    <div class="bullet">
      <span>3</span>
    </div>
    <div class="check fas fa-check">
    </div>
  </div>
  <div class="step">
    <p>
      Submit</p>
    <div class="bullet">
      <span>4</span>
    </div>
    <div class="check fas fa-check">
    </div>
  </div>
</div>
<div class="form-outer">
  <form action="#">
    <div class="page slide-page">
      <div class="title">
        Lets get Started
      </div>
      <div class="form-control">








        <div class="field">
          <div class="label">
            Full Name </div>
          <input type="text" placeholder="FirstName SecondName " id="FullName" required>

        </div>





        <div class="field">
          <div class="label">
            Company Name</div>
          <input type="text" placeholder="Name" id="comname" required>

        </div>





        <div class="field">
          <button class="firstNext next" style="position: relative; left: 280px;">Next</button>
        </div>
      </div>







    </div>







    <div class="page">
      <div class="title">
        Contact Info:</div>
      <div class="field">
        <div class="label">
          Email Address</div>

        <input type="email" placeholder="name@example.com" required>
      </div>
      <div class="field">
        <div class="label">
          Phone Number</div>
        <input type="number" placeholder="+61 412 345 678" required>
      </div>
      <div class="field btns">
        <button class="prev-1 prev">PrevIoUs</button>
        <button class="next-1 next">Next</button>
      </div>
    </div>

    <div class="page">
      <div class="title">
        Services</div>
      <div class="field">
        <div class="label">
          Service Category</div>
        <select id="list1" onchange="updateList('list2',this);" required>
        </select>
      </div>
      <div class="field">
        <div class="label">
          Service</div>
        <select id="list2" onchange="updateList('list3',this);" required></select>

      </div>
      <div class="field">
        <div class="label">
          Description

        </div>
        <textarea name="Description" id="" cols="75" rows="100" style="height:60px;" placeholder="Provide a small description about the service you have selected."></textarea>
      </div>
      <div class="field btns">
        <button class="prev-2 prev" style="position: relative; left: 30px;">PrevIoUs</button>
        <button class="next-2 next" style="position: relative; left: 30px;">Next</button>
      </div>
    </div>
    <div class="page">
      <div class="title">
        Submit</div>
      <div class="field">
        <div class="label">
          Pefered method of Communication</div>
        <select name="communica" id="" required>
          <option value=""></option>
          <option value="Phone">Phone </option>
          <option value="Email ">Email </option>
          <option value="SMS">SMS </option>

        </select>


      </div>
      <div class="textsub" style="position: relative; left: 0; margin-right: 400px;">
        We will reach out to you with some proposal and we will discuss which will be the best for you while hearing your Feedback. You should recieve an email within 24 hours with what will be happening. Thank you
      </div>
      <div class="field btns">
        <button class="prev-3 prev">PrevIoUs</button>
        <button class="submit" style="left: 50px; position: relative;">Submit</button>
      </div>
    </div>
  </form>
</div>
</div>

我在下面包含了相关代码。

<select id="list1" onchange="updateList('list2',this);" required >
      </select>
      </div>
      <div class="field">
               <div class="label">
                Service</div>
      <select id="list2" onchange="updateList('list3',this);" required ></select>

                  </div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot