Friday, October 24, 2014

jQuery Modify dropdown menu and default value

1) Call latest jQuery library
2) JS Associate Array, data may come from ajax post
     '1': {id:1, name:'Andy'},
     '2': {id:2, name:'Jiansen'},
     '3': {id:3, name:'Tommy'}

  3) Put t in dropdown menu and set default value 2
4) Able not to duplicate id    
5) first we have a empty selection dropdown
 <select id="mySelect"><option value=" ">=No TA Assigned=</option></select>
6) Then we have JS function  myFunction() to deal with onclick to add items to dropdown, to append item in dropdown list
row.find('td.Ta select').append('<option value="'+taList[id0].id+'">'+taList[id0].name+'</option>');
7) We need to prevent duplication of items  dropdown, also we can set the default value
   row.find('td.Ta select').val('2');
Complete Code:
<!DOCTYPE html>
<script src=""></script>
table {
    border-collapse: collapse;
table, th, td {
    border: 1px solid black;
function myFunction() {
   var taList = {};
     '1': {id:1, name:'Andy'},
     '3': {id:3, name:'Tommy'} };
   var row = $('table.template tr.template');
//add other options
    for (var id0 in taList){
        var x = document.getElementById("mySelect");
        var i, add='y';
        //prevent duplication           
        for (i = 0; i < x.length; i++) {
 if(t[j].id ==x.options[i].value) add='y' ;
           if(add=='y')     row.find('td.Ta select').append('<option value="'+taList[id0].id+'">'+taList[id0].name+'</option>');          
//Set default value, for example Andy
    row.find('td.Ta select').val('2');

<h1>Add content in dropdown menu and set its default value in jQuery</h1>
 <table class='template' style="border:1" >
   <th>Courses</th><th>Pick TA</th>
<tr class='template'>
 <td>Physics</td>   <td class='Ta'><select id="mySelect"><option value=" ">=No TA Assigned=</option></select></td>
<button onclick="myFunction()">Click me to add TAs TA dropdown list</button>
<p id="demo"></p>

Video: jQuery  Modify dropdown menu and default value
Note: in video, 
       if(taList[id0].id ==i) add='n'
should be changed to
 if(t[j].id ==x.options[i].value) add='y' ;

No comments:

Post a Comment