当在一个下拉列表中选择一个选项时，如何使用javascript在另一个下拉菜单中显示其相关值
when one option selected in one drop down list then how to display its related value in another drop down list using javascript
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Practical_5.View.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
//function Change() {
// if ((document.getElementById('India').checked)) {
// document.getElementById('div1').style.visibility = "visible";
// }
// else {
// document.getElementById('di1v').style.visibility = "hidden";
// }
//}
function toggleDiv() {
// first check if display then hide otherwise show
if ((document.getElementById('div1').style.display == 'none')) {
document.getElementById('div1').style.display = "block";
document.getElementById('div2').style.display = "none";
}
else {
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "block";
}
}
</script>
</head>
<body>
<div style="background-color: red; font-size: x-large; font-weight: bold; text-align: center"><span>You are registering for Matrimony Meet "Matrimonial Get Together - Pune - 22-Aug-2015"</span></div>
<form id="form1" runat="server">
<div class="container">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<img src="../Images/BJS_Logo-hindi.png" alt="logo" style="height: 71px; width: 161px" />
<label class="pull-right" style="font-size: x-large; vertical-align:bottom;margin-top:15px;">Register</label>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="First Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="mname">Middle Name</label>
<input type="text" class="form-control" id="mname" placeholder="Middle Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Last Name" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="sell">Gender</label>
<select class="form-control" id="sel1">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="mnunber">Mobile Number</label>
<input type="text" class="form-control" id="mnumber" placeholder="Mobile Number" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<label>India</label>
<div class="row">
<div class="col-md-1">
<div class="checkbox">
<label>
<input value="" type="checkbox" onchange="toggleDiv()" id="India" />India</label>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<label>Address</label>
<div class="form-group">
<textarea class="form-control" rows="5" id="address" placeholder="Address"></textarea>
</div>
</div>
<div class="col-md-8">
<div id="div1" style="display:none;" class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="State">
<option class="active">Select State</option>
<option>Maharashtra</option>
<option>Andhra Pradesh</option>
<option>Gujrat</option>
</select>
</div>
</div>
if i select state as maharashtra then i want to display all the cities of maharashtra in following dropdown list.
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city">
<option class="active">Select City</option>
</select>
i want to display automatcally the city dropdown list as
Pune
nagpur
mumbai
nashik
......
......
</div>
</div>
</div>
in above code there are div having id div1. in that div there are two dropdown list one for state and one for city. suppose i select one option in state dropdown list eg. i select state maharashtra then i want display all the cities of maharashtra in another dropdown list which is city. how i should
<div id="div2" style="display:block;" class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="Text2" placeholder="Enter State" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="Text3" placeholder="Enter City" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="zip">Country</label>
<select class="form-control" id="Select1">
<option class="active">Select Country</option>
<option>India</option>
<option>US</option>
<option>Singapore</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="Enter Zip" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="lid">Login ID</label>
<input type="text" class="form-control" id="lid" placeholder="Login ID" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="pwd">Password</label>
<input type="text" class="form-control" id="pwd" placeholder="Password" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="cpwd">Conform Password</label>
<input type="text" class="form-control" id="cpwd" placeholder="Conform Password" />
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-3">
<button type="button" class="btn btn-primary">Register Me!</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
please help me how should i do this???请参阅以下工作示例
function populateStates(countryElementId, stateElementId) {
var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
var stateElement = document.getElementById(stateElementId);
stateElement.length = 0; // Fixed by Julian Woods
stateElement.options[0] = new Option('Select State', '');
stateElement.selectedIndex = 0;
var state_arr = s_a[selectedCountryIndex].split("|");
for (var i = 0; i < state_arr.length; i++) {
stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
}
}
function populateCountries(countryElementId, stateElementId) {
// given the id of the <select> tag as function argument, it inserts <option> tags
var countryElement = document.getElementById(countryElementId);
countryElement.length = 0;
countryElement.options[0] = new Option('Select Country', '-1');
countryElement.selectedIndex = 0;
for (var i = 0; i < country_arr.length; i++) {
countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
}
// Assigned all countries. Now assign event listener for the states.
if (stateElementId) {
countryElement.onchange = function () {
populateStates(countryElementId, stateElementId);
};
}
}
https://jsfiddle.net/mq313sga/
相关文章：
- 使用地理位置创建一个显示我当前位置的按钮
- 希望创建一个显示日期+5天和日期+10天之间交付的javascript
- Jquery下拉菜单位于幻灯片上方的一个显示位置
- 当另一个显示时加载HTML而不修改他
- 如何创建一个显示在窗口底部角落的DIV(经过一段时间后）
- 无限旋转木马与下一个和上一个显示
- 三个.js双视口只有一个显示
- i18下一个显示的键而不是值
- 我需要一个显示pdf的解决方案
- 如何制作一个显示必应翻译API结果的简单网页
- 如何添加一个显示/隐藏注释链接不工作与下划线.js
- Flex -调用JavaScript函数并打开一个显示数据的弹出窗口
- 如何创建一个显示当前网页截图的打印对话框
- 在谷歌地图上设置一个显示标记的区域
- Javascript -在点击时显示另一个元素时隐藏一个显示元素
- 创建一个显示/隐藏项目的复选框系统-如何
- 两个不同的谷歌地图在一个页面上，但只有一个显示
- 如何使用jQuery/Javascript创建一个显示输入滑块值的动态文本区
- 如何制作一个显示英国时间的时钟，但整个应用程序都是印度时间
- 将imsg src从一个更改为另一个显示'轻弹'
