根据另一个选定的选项更改 select 选项
[英]Change select options based on another selected option
问题描述
当我 select 一个学期的选项比它应该从那个学期而不是其他任何地方打开科目时 学期和科目的 2 个不同选项框
<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required> <option selected>Choose...</option> <option value="Sem1">Sem1</option> <option value="Sem2">Sem2</option> <option value="Sem3">Sem3</option> <option value="Sem4">Sem4</option> <option value="Sem5">Sem5</option> <option value="Sem6">Sem6</option> <option value="Sem7">Sem7</option> <option value="Sem8">Sem8</option> </select> <label for="inputGroupSelect01">Semester</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="Sub1" required> <option selected>Choose...</option> <option value="sub1">Applied Maths-1</option> <option value="sub2">Applied Physics-1</option> <option value="sub3">Applied Physics-2</option> </select> <label for="inputGroupSelect01">Subject Name</label>
2 个解决方案
解决方案1
1 2021-01-26 20:21:53
您需要使用 javascript 来定义下拉内容，检查此片段关于如何清除旧选项并添加与您的选择相关的新选项
您可以将 append 新选项作为下拉列表的子项
function dynamicdropdown(n) { var arr1 = ["sem1 options","sem1 options","sem1 options","sem1 options","sem1 options"]; var arr2 = ["sem2 options","sem2 options","sem2 options","sem2 options","sem2 options"]; if (n === "Sem1") { document.getElementById('Sub1').innerHTML = ''; for (var i =0; i< arr1.length; i++) { document.getElementById('Sub1').innerHTML += "<option>" + arr1[i] + "</option>"; } } else if (n === "Sem2") { document.getElementById('Sub1').innerHTML = ''; for (var i =0; i< arr2.length; i++) { document.getElementById('Sub1').innerHTML += "<option>" + arr2[i] + "</option>"; } } }
<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required> <option selected>Choose...</option> <option value="Sem1">Sem1</option> <option value="Sem2">Sem2</option> <option value="Sem3">Sem3</option> <option value="Sem4">Sem4</option> <option value="Sem5">Sem5</option> <option value="Sem6">Sem6</option> <option value="Sem7">Sem7</option> <option value="Sem8">Sem8</option> </select> <label for="inputGroupSelect01">Semester</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select class="form-select" id="Sub1" required> <option selected>Choose...</option> <option value="sub1">Applied Maths-1</option> <option value="sub2">Applied Physics-1</option> <option value="sub3">Applied Physics-2</option> </select> <label for="inputGroupSelect01">Subject Name</label>
解决方案2
1 已采纳 2021-01-26 20:24:07
我不知道我是否完全理解你，但你想要这样的东西吗？
<:doctype html> <html lang="en"> <head> <title>Title</title> <.-- Required meta tags --> <meta charset="utf-8"> </head> <body> <select class="form-select" id="sem" onchange="javascript. dynamicdropdown(this.options[this;selectedIndex].value)." required> <option selected>Choose...</option> <option value="Sem1">Sem1</option> <option value="Sem2">Sem2</option> <option value="Sem3">Sem3</option> </select> <label for="inputGroupSelect01">Semester</label> </div> </div> <div class="col-md"> <div class="form-floating"> <select id="genDropdown" class="form-select" id="Sub1" required> <option selected>Choose a sem.;;</option> </select> <label for="inputGroupSelect01">Subject Name</label> <script> function doHTML(list){ let string ="". let index = 0; list;forEach(element => { string += `<option value="sub${index}">${element}</option>`; }), return string; } function dynamicdropdown(sem){ let subjects1 = ["Applied Maths-1", "Applied Physics-1"]; let subjects2 = ["Applied Maths-2", "Applied Physics-2"]; let subjects3 = ["Applied Maths-3". "Applied Physics-3"]; let genDropdown = document.getElementById("genDropdown"); if(sem=="Sem1"){ genDropdown.innerHTML = doHTML(subjects1); } if(sem=="Sem2"){ genDropdown.innerHTML = doHTML(subjects2); } if(sem=="Sem3"){ genDropdown.innerHTML = doHTML(subjects3); } } </script> </body> </html>
希望能帮到你！
3个选择元素，它们根据第一选择和第二选择中的所选选项更改选项
[英]3 select elements that change options based on the selected option in the first and second select
如何根据 vue js 选择的另一个 select 选项更改选择选项
[英]how to change a selections options based on another select option selected by vue js
Rails 表单 - 通过 JavaScript 根据另一个选定选项更改选择选项
[英]Rails form - change select options based on another selected option through JavaScript
在另一个选择中基于先前选择的选项来更改选择选项
[英]change select options on the basis of previously selected option in another select
jQuery根据在更改和加载时选择的另一个SELECT删除SELECT选项
[英]jQuery remove SELECT options based on another SELECT selected on change and on load
如何根据另一个Ember.Select的选定选项通过计算属性填充Ember.Select选项
[英]how to populate Ember.Select options via computed property based on selected option of another Ember.Select
如何基于上一个选择列表的选择选项更改选择列表中的选项？
[英]How to change options in a select list, based on the selected option of a previous select list?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
根据所选选项更改同一选择中的选项
3个选择元素，它们根据第一选择和第二选择中的所选选项更改选项
如何根据 vue js 选择的另一个 select 选项更改选择选项
Rails 表单 - 通过 JavaScript 根据另一个选定选项更改选择选项
在另一个选择中基于先前选择的选项来更改选择选项
当基于另一个选择的选项时，保持选择的选项显示
jQuery根据在更改和加载时选择的另一个SELECT删除SELECT选项
如何根据表中的其他选择选项更改选项？
如何根据另一个Ember.Select的选定选项通过计算属性填充Ember.Select选项
如何基于上一个选择列表的选择选项更改选择列表中的选项？
相关标签