Category: JQuery

20 Mar 2017 19:31

Joined:	12/04/2011
Level:	Silver
Points:	104

Points:	5

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

20 Mar 2017 19:55

Joined:	18/12/2008
Level:	Gold
Points:	2921

Points:	4

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

27 Mar 2017 07:36

Joined:	30/04/2012
Level:	Gold
Points:	7233

Points:	4

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>

How to add dropdown list in jquery script

About dotnetspider.com

Quick Links

General

Services