<html>
<head>
<title></title>
<meta http-*****="Content-Type" **********text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload=function() {
var df=document.forms[0][0]; /* this is another method for accessing form elements*/
df.onchange=function() {
val=df.options[df.selectedIndex].value;
txt=df.options[df.selectedIndex].text;
alert('without a set "option value", \nOpera and Firefox take...\n\n "value" to refer to the "option text"'+
' ...\n\n '+val+'\n\n...IE returns nothing,\n\n but will submit the "text" as a "value"');
alert('IE will only respond to "text" to give "option text"...\n\n '+txt);
}
}
</script>
</head>
<body>
<form action="http://www.google.com/" method="get"> <!--google is good for testing form submissions-->
<div>
<select name="select" >
<option>option one</option>
<option>option two</option>
<option>option three</option>
<option>option four</option>
<option>option five</option>
</select>
<input type="submit">
</div>
</form>
</body>
[LEFT]</html>[/LEFT]
<!doctype html>
<html>
<head>
<title>jQuery SelectBox</title>
<meta http-*****="Content-type" **********text/html; charset=utf-8" />
<link href="/ArchiveProjectWeb/Css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="country_id" id="country_id" tabindex="1">
<option value="">-- Select country --</option>
<optgroup label="North America">
<option value="1">USA</option>
<option value="9">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="2">France</option>
<option value="3">Spain</option>
<option value="6">Bulgaria</option>
<option value="7" disabled="disabled">Greece</option>
<option value="8">Italy</option>
</optgroup>
<optgroup label="Asia" disabled="disabled">
<option value="5">Japan</option>
<option value="11">China</option>
</optgroup>
<option value="4">Brazil</option>
<option value="10">South Africa</option>
</select>
<script type="text/javascript" src="/ArchiveProjectWeb/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/ArchiveProjectWeb/js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("#country_id").change(function() {
var selectVal = $('#country_id :selected').val();
alert(selectVal);
$.ajax({
url : "getCity.call",
type : "POST",
dataType : "json",
data: {country_id: selectVal},
success : function(data) {
var options = '';
for (var i = 0; i < data.length; i++) {
options += "<option value='" + i + "'>" + data[i] + "</option>";
}
document.getElementById('city_id').innerHTML = options;
}
});
});
});
</script>
<div class="container">
<select name="city_id" id="city_id" tabindex="2">
</select>
</div>
</body>
</html>
