<html>
<head runat="server">
<title>Populate dropdown using jQuery from database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default4.aspx/Getusers",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);
var option = json.map(x => "<option value='" + x.userid + "'>" + x.Username + "</option>");
//HTML dropdownlist
$("#ddlUserinfo").html('<option value="-1">All</option>');
$("#ddlUserinfo").append(option.join(' '));
// Asp dropdownlist
$('[id*=Aspdropdownlist]').html('<option value="-1">All</option>');
$('[id*=Aspdropdownlist]').append(option.join(' '));
}
});
});
function OnSubmit()
{
alert("ASP Control:" + $("[id*=Aspdropdownlist] option:selected").text());
alert("HTML Control:" + $("#ddlUserinfo option:selected").text());
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="col-md-12">
<div class="col-md-6">
<div>
<strong>Html Dropdownlist control</strong>
<select id="ddlUserinfo" class="form-control">
</select>
</div>
</div>
</div>
<br />
<br />
<div class="col-md-12">
<div class="col-md-6">
<div>
<strong>Asp Dropdownlist control </strong>
<asp:DropDownList ID="Aspdropdownlist" runat="server" class="form-control">
</asp:DropDownList>
</div>
</div>
</div>
<br />
<br />
<div class="col-md-12">
<div class="col-md-6">
<div>
<button type="button" class="btn btn-primary" onclick="OnSubmit()">Submit</button>
</div>
</div>
</div>
</form>
</body>
</html>