<%@ 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???
答案 0 :(得分：1)
请参阅以下工作示例
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);
};
}
}