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) {
    debugger;
    rc++;
    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>");
    counter++;
    }


    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

    Hi,

    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) {
    _select.append(
    $('<option></option>').val(val).html(text)
    );
    });
    $('#mySelect').append(_select.html());


    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>
    <form>
    <select name="dropdown">
    <option>Select...</option>
    <option>Machine 1</option>
    <option>Machine 2</option>
    </select>
    </form>



    Now your Jquery will be like,



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



    Thanks,
    Mani

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

    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>
    </div>
    </div>


Sign In to post your comments