Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
      <meta name="description" content="Combobox open / enable" />
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
        <title>reactjs combobox</title>
        <link rel="stylesheet" type="text/css" href="http://rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/css/page.css">
        <link rel="stylesheet" type="text/css" href="http://rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/css/Combobox.css">
    </head>
    <body>
        <button onClick="openButtonClick(); return false;">open</button>
        <button onClick="enableButtonClick(); return false;">enable</button>
        <div id="insert_here"></div>
​
        <script src="//fb.me/react-with-addons-0.10.0.js"></script>
        <script src="http://rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/js/Combobox.js" type="text/javascript" charset="utf-8"></script>
        </script>
    </body>
</html>
 
var data = [
    { label: "Point",    value: "0" },
    { label: "Triangle", value: "3" },
    { label: "Square", value: "4" },
    { label: "Star",   value: "5" },
    { label: "Super Star",   value: "Michael Jackson" },
    { label: "Point1",    value: "0" },
    { label: "Triangle1", value: "3" },
    { label: "Square1", value: "4" },
    { label: "Star1",   value: "5" },
    { label: "Point2",    value: "0" },
    { label: "Triangle2", value: "3" },
    { label: "Square2", value: "4" },
    { label: "Star2",   value: "5" },
    { label: "Point3",    value: "0" },
    { label: "Triangle3", value: "3" },
    { label: "Square3", value: "4" },
    { label: "Star3",   value: "5" }
];
var comboboxInstance;
var openButtonClick = function() {
    if (comboboxInstance.isClosed()) {
      comboboxInstance.open();
    } else {
      comboboxInstance.close();
    }
};
​
var enableButtonClick = function() {
    if (comboboxInstance.isDisabled()) {
      comboboxInstance.enable();
    } else {
      comboboxInstance.disable();
    }
};
​
var log = function(newValue, oldValue) {
    console.log(comboboxInstance1.value());
};
​
comboboxInstance = React.renderComponent(
  NS.Combobox({data: data, defaultValue: "p", onChange: log, disabled: false}),
    document.getElementById('insert_here')
);
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x