使用 javaScript 调用一些函数的 html 表单答案

【问题标题】：html form using javaScript to call out some function使用 javaScript 调用一些函数的 html 表单
【发布时间】：2020-11-14 14:55:15
【问题描述】：

我是初学者，我正在尝试设置一个表单。我已经编写了 html/css 代码。我想要做的是点击一个学习级别，例如学士学位，我希望学士学位下的所有课程都显示在第二个框中（选择课程），同时隐藏框中的其余课程。

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
                </form>
                <br>

                <form id="form2" action="#">
                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                        <optgroup label="Bachelors">
                            <option>Microbiology</option>
                            <option>chemistry</option>
                            <option>physics</option>
                        </optgroup>
                        <optgroup label="Postgraduates">
                            <option>computer</option>
                            <option>biology</option>
                            <option>accounting</option>
                        </optgroup>

                        <optgroup label="PhD">
                            <option>business</option>
                            <option>fisheries</option>
                            <option>agric</option>
                        </optgroup>
                    </select>
                    
                </form>

【问题讨论】：

标签： javascript html css forms

【解决方案1】：

在这里，我想出了一个简单的解决方案。我已经稍微改变了你的 html。我设置了与optgroup 的label 相同的值，以便我们可以选择特定的optgroup 进行显示。所以解决方法很简单：

隐藏第二个框的所有选项。
通过courses.querySelector('[label="' + value + '"]'); this 显示一个，其中value 是您第一个框的选定值。

看看下面的代码sn-p：

function getLevels() {
    var value = document.getElementById("level-select").value;

    if (value) {
        var courses = document.querySelector("#cour");
        var all_options = courses.querySelectorAll('optgroup');
        var show_courses = courses.querySelector('[label="' + value + '"]');

        all_options.forEach(function (element) {
            element.style.display = "none";
        });

        show_courses.style.display = "block";
    }

}

<h2>This is a form</h2>

<p>Online Application:</p>

<form id="form1" action="#">
    <label for="school-select">Choose levels of study:</label>

    <select id="level-select" onchange="getLevels()">
        <option value="">--Please choose an option--</option>
        <option value="Bachelors">Bachelors</option>
        <option value="Postgraduates">Postgraduates</option>
        <option value="PhD">PhD</option>
    </select>

</form>
<br>

<form id="form2" action="#">
    <label for="course-select">Choose course:</label>

    <select id="cour">
        <option selected>--Choose Course--</option>
        <optgroup label="Bachelors">
            <option>Microbiology</option>
            <option>chemistry</option>
            <option>physics</option>
        </optgroup>
        <optgroup label="Postgraduates">
            <option>computer</option>
            <option>biology</option>
            <option>accounting</option>
        </optgroup>

        <optgroup label="PhD">
            <option>business</option>
            <option>fisheries</option>
            <option>agric</option>
        </optgroup>
    </select>

</form>

【讨论】：

点赞...正是我所需要的
@Ayplux，我的荣幸 :)

【解决方案2】：

只需在<option>标签中添加onClick事件？

<option onClick="myFunction()">Microbiology</option>

<script>
function myFunction() {
  //do what you want..
}
</script>```

【讨论】：

【解决方案3】：

在选择字段中添加onchange事件，并将值推送到类似的函数；

<select id="level-select" onchange="setLevel(this.value)">

隐藏css中的所有选项组；

#cour optgroup {
    display:none;
}

给所有选项组一个唯一的ID，包含第一个选择的值，比如；

<optgroup label="Bachelors" id="course_bachelor">

现在 onchange 事件的函数可能是这样的；

    function setLevel (val) {
        var elements = document.getElementsByTagName('optgroup');

        // Loop through all elements and check if they are hidden or shown
        for(var i=0; i < elements.length; i++) {
            if (elements[i].id === 'course_' + val) {
                elements[i].style.display = 'block';
            } else {
                elements[i].style.display = 'none';
            }
        }
    }

【讨论】：

【解决方案4】：

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
               
                <br>

                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                       
                    </select>
                    
                </form>

var select = document.getElementById("level-select");
select.onchange(() => {
if(select.value == 'bachelor') {
document.getElementById("cour").value == "<optgroup label="Bachelors">
                        <option>Microbiology</option>
                        <option>chemistry</option>
                        <option>physics</option>
                    </optgroup>"
}

})

对所有条件都这样做。

【讨论】：

我认为用 javascript 注入 html 是不好的做法，因为它使代码大部分时间不可读。您还可以引入 xss 漏洞。
那么你应该使用一些简单的样式，比如 bootstrap 中的折叠。这也会有所帮助。
确实！无论如何，我认为使用框架比使用普通的东西更好，因为这样的代码结构更加结构化，并且大多数无聊的代码已经完成。 ;)

【解决方案5】：

您需要使用一些 Javascript 来执行此操作。这是一种适合您的解决方案。

我已经更新了您的一些 html 名称（第一个下拉列表值与您的第二个下拉列表中的“optgroup”标签完全匹配）。还添加了一些 CSS 以使课程下拉选项在您选择有效选项之前不显示，这可以防止用户返回更改第一个下拉值，而第二个下拉值保持不变。始终让您的用户界面“防傻”：

//grab both dropdowns and store in variable
var levelSelectDropdown = document.querySelector('#level-select');
var coursesDropdown = document.querySelector('#cour');

//create an on 'change' event for first dropdown 
levelSelectDropdown.addEventListener('change', levelDropdownChange);

function levelDropdownChange(e){
  var selectedLevelOfStudy = e.target.value;
  var coursesGroups = coursesDropdown.querySelectorAll('optgroup');
  
  //this basically hides the 'default' empty option that's auto-selected
  //by default
  coursesDropdown.querySelector('option[value="default"]').style.display = 'none';
  
  //loop through all 'optgroup' items in second dropdown (coursesGroups)
  coursesGroups.forEach(function(element){
    //default course dropdown to first element (this essentially resets
    //the course dropdown each time level of study dropdown is changed
    coursesDropdown.selectedIndex = 0;
    //make sure all optgroups are hidden
    element.style.display = 'none';
    //only display optgroup whose label matches the value selected
    //from first dropdown
    if(element.getAttribute('label') == selectedLevelOfStudy){
      element.style.display = 'block';
    }
  })
}

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

#cour optgroup {
  display:none;
}

<h2>This is a form</h2>
  <p>Online Application:</p>
  <form id="form1" action="#">
    <label for="school-select">Choose levels of study:</label>
    <select id="level-select">
      <option value="">--Please choose an option--</option>
      <option value="bachelors">Bachelors</option>
      <option value="postgraduates">Postgraduates</option>
      <option value="phd">PhD</option>
    </select>
  </form>
  <br>
  <form id="form2" action="#">
    <label for="course-select">Choose course:</label>
    <select id="cour">
      <option value="default"></option>
      <optgroup label="bachelors">
        <option>Microbiology</option>
        <option>chemistry</option>
        <option>physics</option>
      </optgroup>
      <optgroup label="postgraduates">
        <option>computer</option>
        <option>biology</option>
        <option>accounting</option>
      </optgroup>
      <optgroup label="phd">
        <option>business</option>
        <option>fisheries</option>
        <option>agric</option>
      </optgroup>
    </select>
  </form>

【讨论】：

【解决方案6】：

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">

   <script lang="javascript">
function onLevelofStudyChange()
{
  var selectedLevel=document.getElementById("level-select").value;
  var course = document.querySelector("#cour");
  var alloption = course.querySelectorAll('optgroup')
  var getByLabel = course.querySelector('[label="'+selectedLevel+'"]');

   
//Hide all Optgroups
alloption.forEach(function(element){
 element.style.display = "none";
});


if(getByLabel!=null)
   getByLabel.style.display = "block";

}
</script>
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select" onchange="onLevelofStudyChange()">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
                </form>
                <br>

                <form id="form2" action="#">
                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                        <option>--Please Choose course--</option>
                        <optgroup label="bachelor" style="display:none">
                            <option>Microbiology</option>
                            <option>chemistry</option>
                            <option>physics</option>
                        </optgroup>
                        <optgroup label="postgraduates" style="display:none">
                            <option>computer</option>
                            <option>biology</option>
                            <option>accounting</option>
                        </optgroup>

                        <optgroup label="phd" style="display:none">
                            <option>business</option>
                            <option>fisheries</option>
                            <option>agric</option>
                        </optgroup>
                    </select>
                    
                </form>

试试这个，它应该可以工作还请注意我已经更改了 Optgroup 标签以匹配第一个下拉列表的值

【讨论】：