个人中心
文章发布
退出
作者热门文章
- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表？
27
4
我有一个名为 Agency 的下拉菜单，其中包含 2 个选项:
如果选择 SPM，则不会出现下拉菜单。但是，如果选择 PPS，则会出现另外 2 个名为 Department 和 Office 的不同下拉菜单。在Department中，还有另外3个选项:
如果选择HQ，null 选项将显示在Office 下拉列表中。但是，如果选择了 Branch，Office 下拉菜单将显示如下选项:
在另一边，如果选择了Stall，Office下拉菜单将显示如下选项:
<!-- <script>
var created = 0;
function displayAccordingly() {
if (created == 1) {
removeDrop();
}
//Call Agency the main dropdown menu
var Agency = document.getElementById('Agency');
//Create the new dropdown menu
var whereToPut = document.getElementById('myDiv');
var newDropdown = document.createElement('select');
newDropdown.setAttribute('id',"newDropdownMenu");
whereToPut.appendChild(newDropdown);
if (Agency.value == "PPS") {
var optionD=document.createElement("option");
optionD.text="Department";
newDropdown.add(optionD,newDropdown.options[null]);
var optionOffice=document.createElement("option");
optionOffice.text="Office";
newDropdown.add(optionOffice,newDropdown.options[null]);
} else if (Agency.value == "SPM") {
removeDrop('myDiv').hide();
}
created = 1
}
function removeDrop() {
var d = document.getElementById('myDiv');
var oldmenu = document.getElementById('newDropdownMenu');
d.removeChild(oldmenu);
}
</script>
-->
<!DOCTYPE html>
<html>
<head>
<title>Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#Agency").change(function(){
//To remove all the dropdown in myDiv
$('#myDiv').html('');
//Create the new dropdown menu
var whereToPut1 = document.getElementById('myDiv');//Department dropdown
var newDropdown1 = document.createElement('select');
newDropdown1.setAttribute('id',"newDropdownMenu");
whereToPut1.appendChild(newDropdown1);
//Create another div inside myDiv for another dropdown menu
var innerDropdowndiv = document.createElement('div');
innerDropdowndiv.setAttribute('id',"innerdropdowndiv");
whereToPut1.appendChild(innerDropdowndiv);
var whereToPut2 = document.getElementById('innerdropdowndiv');
//Create another dropdown menu
var newDropdown2 = document.createElement('select');//Office dropdown
newDropdown2.setAttribute('id',"innerDropdownMenu");
whereToPut2.appendChild(newDropdown2);
if ($('#Agency').find(":selected").text() == "PPS") {
$('#newDropdownMenu').append('<option id="Department">Department</option>')//Department dropdown appear
$('#newDropdownMenu').append('<option>Office</option>')//Office dropdown will appear below Department
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
$("#newDropdownMenu").change(function(){
if($('#newDropdownMenu').find(":selected").text() == "Department")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Branch")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor1</option>')
$('#innerDropdownMenu').append('<option>Floor2</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Stall")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor3</option>')
$('#innerDropdownMenu').append('<option>Floor4</option>')
}
else {
{
$('#innerdropdowndiv').html('');
}
}
})
}
else {
$('#myDiv').html('');
}
});
});
</script>
</head>
<body>
<td class = "Agency">Agency<span class="required"> * </span></td>
<td><select id="Agency"">
<option value="Choose">Choose</option>
<option value="SPM">SPM</option>
<option value="PPS">PPS</option>
</select>
<h></h>
</td>
<tr>
<td></td>
<td>
<div id="myDiv"></div>
</td>
</tr>
<td>
<div id="innerdropdowndiv"></div>
</td>
</tr>
</body>
</html>
最佳答案
<script>
$(document).ready(function(){
$("#Agency").change(function(){
//To remove all the dropdown in myDiv
$('#myDiv').html('');
//Create the new dropdown menu
var whereToPut1 = document.getElementById('myDiv');
var newDropdown1 = document.createElement('select');
newDropdown1.setAttribute('id',"newDropdownMenu");
whereToPut1.appendChild(newDropdown1);
//Create another div inside myDiv for another dropdown menu
var innerDropdowndiv = document.createElement('div');
innerDropdowndiv.setAttribute('id',"innerdropdowndiv");
whereToPut1.appendChild(innerDropdowndiv);
var whereToPut2 = document.getElementById('innerdropdowndiv');
//Create another dropdown menu
var newDropdown2 = document.createElement('select');
newDropdown2.setAttribute('id',"innerDropdownMenu");
whereToPut2.appendChild(newDropdown2);
if ($('#Agency').find(":selected").text() == "PPS") {
$('#newDropdownMenu').append('<option id="Dep">Department</option>')
$('#newDropdownMenu').append('<option>Office</option>')
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
$("#newDropdownMenu").change(function(){
if($('#newDropdownMenu').find(":selected").text() == "Department")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>HQ</option>')
$('#innerDropdownMenu').append('<option>Branch</option>')
$('#innerDropdownMenu').append('<option>Stall</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Branch")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor1</option>')
$('#innerDropdownMenu').append('<option>Floor2</option>')
}
else if($('#newDropdownMenu').find(":selected").text() == "Office" && $('#innerDropdownMenu').find(":selected").text()=="Stall")
{
$('#innerdropdowndiv').html('');
$('#innerdropdowndiv').append($('<select>').attr('id','innerDropdownMenu'))
$('#innerDropdownMenu').append('<option>Floor3</option>')
$('#innerDropdownMenu').append('<option>Floor4</option>')
}
else {
{
$('#innerdropdowndiv').html('');
}
}
})
}
else {
$('#myDiv').html('');
}
});
});
</script>
关于JavaScript : Dynamic Dropdown for Another Hidden Dropdown and Different Option，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42217328/
27
4
0
我正在尝试让 Bootstrap 下拉菜单与我的 Jade 布局一起使用。但实际上，当我尝试在我的 Jade 文件中执行 $(".dropdown-toggle").dropdown 时出现此错误:
我正在使用 Semantic React UI's Dropdown ，并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。 我尝试在父级的 render() 中使用 ref: (thi
我有一个脚本如下: var i = 0; function add_relation() { i = i + 1; var key = $('', {
我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 填充了正确来自数据库的数据。当用户在第一个 DropDown 上进行选择时，第二个 Dro
我是一名开发新手，但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。 我要做的是根据在 other 中
在 Bootstrap 文档中，似乎有两种不同的方法来创建下拉列表: .dropdown .btn-group first如下: Dropdown ...
我确实在 kv 文件中定义了一个基本的自定义 DropDown。应用程序 GUI 非常简单，顶部有一个按钮栏，屏幕的其余部分有一个 TextInput。这是代码: dropdowntrialgui.p
在移动 View 中单击 .dropdown 菜单时，.dropdown 和 .dropdown-menu 之间有一个小空间. 如图所示 Question is it possible to remo
我正在尝试创建一个类似于 DataEntry 网格/表的结构，其中用户在单击按钮时追加新行。该行将包含文本框、下拉菜单、日历控件。所有这些都应该在客户端完成。到目前为止，我已经有了这个，正如你所看到的
我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时，我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个
我正在使用@atlaskit/dropdown-menu (https://atlaskit.atlassian.com/packages/core/dropdown-menu)。我想在 Item 点
我在我的 angular 应用程序中使用 PrimeNG，我有 p-dropdown 的问题 问题 我为 country 和 caste_category 有两个下拉菜单，我只为 India 提供 c
我有一个表单 View ，在编辑模板中我有两个下拉菜单。 下拉 1 明确设置了允许值的列表。它也设置为自动回发。 下拉 2 是数据绑定(bind)到 objectdatasource，这个 objec
我有一个名为 Agency 的下拉菜单，其中包含 2 个选项: 文凭 PPS 如果选择 SPM，则不会出现下拉菜单。但是，如果选择 PPS，则会出现另外 2 个名为 Department 和 Offi
我是 Angular 的新手，所以这可能是一个非常简单的问题。我正在使用 ngx-select-dropdown (下拉控件)。页面上有两个下拉控件，当第一个下拉列表更改时，第二个下拉列表应更新下拉选
我有一个包含文本区域的下拉菜单。当在文本区域按下返回键时，我希望关闭下拉菜单。这是以下内容的作用: $(document).ready(function(){ $('#edit').keypres
我的页面中有这些SELECT Pending Confirmed Cancelled Refunded Shipped Paid Complete 还有这个 Pending Confirme
我有兴趣学习以智能、优雅的方式在整个站点中构建导航项，这些导航项具有胡萝卜，单击后会展开菜单项列表。 我希望动态构建菜单项(不一定全部使用 ajax)。但它们不应在页面上进行硬编码。 这似乎是像 TW
我有一个选择下拉菜单，一个是 Bootstrap 导航下拉菜单，而不是单击以打开 Bootstrap 导航下拉菜单我在鼠标悬停时更改了它但是当选择下拉菜单打开并且鼠标悬停在 Bootstrap 导航上
我对此很陌生，所以如果我的问题没有按应有的方式提出，我深表歉意。 基本上，我使用 jQuery 的目的是，当从第一个下拉框中选择名为“Apple”的字段时，第二个下拉框将只允许选择“Firm”字段，而
我是一名优秀的程序员,十分优秀！