Here I am posting the JQuery code to load the list box on demand. This code will load some number of record first and when you say Load more record it will load more record.
Exapmle :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript">
function getRecord(id) {
try {
var myOptions = {
12321: 'text1',
12322: 'text2'
};
$.each(myOptions, function (val, text) {
$('#' + id).append(
$('<option></option>').val(val).html(text)
);
});
}catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<select id = "Record" multiple="multiple" size="10">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
<option> 6 </option>
<option> 7 </option>
<option> 8 </option>
<option> 9 </option>
<option> 10</option>
<option> 11</option>
<option> 12</option>
<option id="loadMoreRecord" onclick="getRecord('Record');"> Load more record </option>
</select>
</body>
</html>
Exapmle :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript">
function getRecord(id) {
try {
var myOptions = {
12321: 'text1',
12322: 'text2'
};
$.each(myOptions, function (val, text) {
$('#' + id).append(
$('<option></option>').val(val).html(text)
);
});
}catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<select id = "Record" multiple="multiple" size="10">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
<option> 6 </option>
<option> 7 </option>
<option> 8 </option>
<option> 9 </option>
<option> 10</option>
<option> 11</option>
<option> 12</option>
<option id="loadMoreRecord" onclick="getRecord('Record');"> Load more record </option>
</select>
</body>
</html>
No comments:
Post a Comment