JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
var Demo = React.createClass({
selectOptions: {
food: ['apple', 'pizza', 'hotdog'],
places: ['New York', 'California', 'Texas'],
planets: ['Mars', 'Venus', 'Earth']
},
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {
mainSelection: 'food',
secondSelection: 'apple'
};
},
render: function() {
return (
<div>
<select onChange={this.handleMainSelectChange}>
{this.renderOptions(Object.keys(this.selectOptions))}
</select>
<select valueLink={this.linkState('secondSelection')}>
{this.renderOptions(this.selectOptions[this.state.mainSelection])}
</select>
<div>{this.state.mainSelection}</div>
<div>{this.state.secondSelection}</div>
</div>
);
},
renderOptions: function (optionsArray) {
return optionsArray.map(function (option) {
return <option value={option}>{option}</option>;
});
},
handleMainSelectChange: function (event) {
var value = event.target.value;
this.setState({
mainSelection: value,
secondSelection: this.selectOptions[value][0]
});
}
});
React.render(<Demo />, document.body);