javascript - Add optgroup to dropdown created dynamically using REST, jQuery and Boostrap -


this first project using bootstrap , i'm pretty new jquery also, hope question not simple of you. have drop-down have created pulling data sharepoint using rest , ajax. part works great.

js:

$(document).ready(function () { var requesturi = "blah-blah/_api/web/lists/getbytitle('ad_db')/items?select=title,state"; var requestheaders = {     "accept": "application/json;odata=verbose" } $.ajax({     url: requesturi,     type: 'get',     datatype: 'json',     async: false,     headers: requestheaders,     success: function (data) {         $.each(data.d.results, function (i, result) {             var itemcasenumber = result.title;             var itemstate = result.state;             $('#mylist').append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + itemcasenumber + '</a></li>');          });     },     error: function ajaxerror(response) {         alert(response.status + ' ' + response.statustext);     } }); });

this html:

<ul class="dropdown-menu" role="menu" aria-labelledby="drop1" id="mylist"></ul>

as mentioned drop-down gets populated expected, issue. there way create optgroups based on values of variable "itemstate", contains states in sharepoint list? thanks!

bootstrap doesn't have optgroups default use dropdown-headers. can switch bootstrap-select plugin if want opt-groups.

anyway, example dropdown-headers:

var results = [{ state: 'az', title: 'case 1234'},                 { state: 'ga', title: 'case 4212'},                 { state: 'ia', title: 'case 23332'},                 { state: 'la', title: 'case 2221' },                 { state: 'ks', title: 'case 4432' },                 { state: 'md', title: 'case 2882'},                 { state: 'ks', title: 'case 1022' },                 { state: 'ga', title: 'case 1111' }];    // sort results state field. uses comparestates function below  results.sort(comparestates);    var laststate = '';  $.each(results, function (i, result) {      var itemcasenumber = result.title;      var itemstate = result.state;        // add new header each state       if (itemstate != laststate) {                  // don't add divider line if first state in dropdown          if (i>0) {              $('#mylist').append('<li role="presentation" class="divider"></li>');          }                  laststate = itemstate;          $('#mylist').append('<li role="presentation" class="dropdown-header">'+itemstate+'</li>');      }            $('#mylist').append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + itemcasenumber + '</a></li>');  });    function comparestates(a,b) {    if (a.state < b.state)       return -1;    if (a.state > b.state)      return 1;    return 0;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>      <div class="dropdown">    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu1" data-toggle="dropdown">      dropdown      <span class="caret"></span>    </button>    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1" id="mylist"></ul>  </div>


Comments

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria...
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w...
Read more