ds-ddl

by dshilkret

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="abc">
<!-- btn-group --> 
  				<div id="result" class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Result</button>
                   <ul class="dropdown-menu">
                  </ul>
              </div><!-- /btn-group -->
 

</div>

<div id="show"><!-- Show the content related to the item clicked in either of the lists here --></div>

JavaScript

var json1 = {  
   "result":[  
      {  
         "number":"QUE0001019",
         "sys_id":"03a318e24f32030099f1b2718110c7fe",
         "sys_updated_by":"admin",
         "sys_created_on":"2017-12-05 14:57:16",
         "sys_mod_count":"0",
         "sys_updated_on":"2017-12-05 14:57:16",
         "sys_tags":"",
         "querytext":"[{and=[{term={Incident.date=2017-12-05T09:54:22}}, {term={Incident.incidentnumber=INC0010001}}]}, {term={Incident.boolean=0}}, {terms={Incident.state.multi=[]}}, {not={filter={term={Incident.shortdesc=task}}}}, {exists={field=Incident.shortdesc}}, {range={Incident.sladate={gte=now, lte=now+7d}}}]",
         "sys_class_name":"x_150952_elastic_s_query_context",
         "sys_created_by":"admin"
      },
      {  
         "number":"QUE0001020",
         "sys_id":"9ba318624f32030099f1b2718110c704",
         "sys_updated_by":"admin",
         "sys_created_on":"2017-12-05 14:57:17",
         "sys_mod_count":"0",
         "sys_updated_on":"2017-12-05 14:57:17",
         "sys_tags":"",
         "querytext":"[{and=[{term={Incident.date=2017-12-05T09:54:22}}, {term={Incident.incidentnumber=INC0010001}}]}, {term={Incident.boolean=0}}, {terms={Incident.state.multi=[]}}, {not={filter={term={Incident.shortdesc=task}}}}, {exists={field=Incident.shortdesc}}, {range={Incident.sladate={gte=now, lte=now+7d}}}]",
         "sys_class_name":"x_150952_elastic_s_query_context",
         "sys_created_by":"admin"
      }
   ]
};





$(document).ready(function(){
  for( index in json1.result )
    {
      $('#result ul').append('<li><a href="#" data-System Id="'+json1.result[index].sys_id+'" data-Number="'+json1.result[index].number+'">'+json1.result[index].sys_created_by+'</a></li>');
   
    }
	
  
  $('a').on('click', function(){
    $('#show').html(   'Number: ' + $(this).attr('data-Number') + '| System Id : ' +  $(this).attr('data-System Id')   );
  });
});