Demo - ComboBox

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <br>
  <div id="mainCombo"></div>
  <br>
  <div id="secondCombo"></div>
</div>

CSS

.wj-combobox {
  margin-bottom: 12px;
}

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'China,Germany,Greece,Italy,Japan,Portugal,Russia,Spain,UK,US'.split(','),
    data = [],
    initialized = false;
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      active: i % 5 != 0,
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

	var secondCombo = new wijmo.input.ComboBox('#secondCombo', {});

  // select a country (string)
  var mainCombo = new wijmo.input.ComboBox('#mainCombo', {
    textChanged: function(s, e) {
    	setText('theComboStringCurrent', s.text);
    },
    itemsSource: countries
	});

	// show text in an element on the page
  function setText() {
  	if(initialized){
    	secondCombo.itemsSource = countries;
    }else{
    	initialized = true;
    }
  }
}