You must Sign In to post a response.
  • Category: JQuery

    How to add dropdown list in jquery script

    hi all below is my jquery script and below of that my dropdown is there i have hardcoded actually so dropdownlist coming but i want to add my dropdownlist already containing data in mvc.
    finally ia want to add in maintable

    function addNextRow(currentEle) {
    if (counter > 10) {
    alert("Only 10 Approvers allowed");
    return false;
    $("#maintable tr:last").after("<tr id=lineRow_"+rc+" class='data-contact-person'><td colspan=4></td><td><td><select name=Approver"+rc+" class='form-control Login01 required' data-val='true' id= App1Login, required='required' onchange='getApprover1(this.options[this.selectedIndex].value);' style='width:100%'> </td><td><input name=Approver"+rc+"Name class='form-control Approver1Name text-box single-line' id=ValApp"+rc+"Login readonly='readonly' style='width:100%;' type='text' value=''></td></td><td class='center'><a href='#'><img src='./screen1_files/plus.jpg' id='AddAttr' width='16px' height='16px' title='' alt='' onclick='addNextRow(this);return false;'></a><a href='#'> <img src='./screen1_files/cross.jpg' width='16px' height='16px' title='' alt='' onclick='removerow(this);return false'></a></td></tr>");

    this i my dropdown list in mvc

    <td>@Html.DropDownListFor(model => model.Approver1, (IEnumerable<SelectListItem>)ViewBag.Approver, "Select", new { Name = "Approver1", id = "App1Login", onchange = "getApprover1(this.options[this.selectedIndex].value);", @class = "form-control Login01 required", required = "required", style = "width:100%" }) </td>
  • #769069


    Not able to view the code which full of HTML tag formatted. So I will give you the basic idea that how to call a dropdownlist of items in Jquery.

    var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
    var _select = $('<select>');
    $.each(myOptions, function(val, text) {

    If you are trying to add dynamic value in the Dropdown list then follow the below steps:
    Suppose consider this is your cshtml code

    <input id="text-to-add" type="text" value="Machine 3">
    <button id="new-item">Add to dropdown</button>
    <select name="dropdown">
    <option>Machine 1</option>
    <option>Machine 2</option>

    Now your Jquery will be like,

    $(document).ready(function () {
    $('#new-item').click(function() {
    $('select').append( '<option>' + $('#text-to-add').val() + '</option>' );


  • #769111
    You can try this code snippet to your resource to add dropdown list in jquery script
    <select name='mylist' id='mylist' size='1'>
    while($rec = mysql_fetch_assoc($result))
    echo "<option>".$rec['name']."</option>";

    In Html code

    <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
    <a href="#">Example 1</a>
    <a href="#">Example 2</a>
    <a href="#">Example 3</a>

  • Sign In to post your comments