title: How to create a ipywidgets from multiple ones?
body: <p>Let's say I want a widget composed of an IntText widget and a DropDown widget which value is a concatened string of those widgets values. How can I do?</p>
  
  <p>Here is an attempt:</p>
  
  <pre><code>import re
  import ipywidgets as ipw
  
  from IPython.display import display
  
  
  class IntMultipliedDropdown:
      _VALUE_PATTERN = re.compile('(?P&lt;num&gt;\d+) (?P&lt;option&gt;\w+-?\w*)')
  
      def __init__(self, options, option_value, int_value=1):
          self.number = ipw.IntText(int_value)
          self.options = ipw.Dropdown(options=options, value=option_value)
          self.box = ipw.HBox([self.number, self.options])
  
          self.number.observe(self._on_changes, names='value')
          self.options.observe(self._on_changes, names='value')
  
          self._handelers = []
  
      def _on_changes(self, change):
          for handeler in self._handelers:
              handeler(self.value)
  
      @property
      def value(self):
          return "{} {}".format(self.number.value, self.options.value)
  
      @value.setter
      def value(self, value):
          match = re.search(self._VALUE_PATTERN, value)
          groupdict = match.groupdict()
          self.number.value = groupdict['num']
          self.options.value = groupdict['option']
  
      def _ipython_display_(self, **kwargs):
          return self.box._ipython_display_(**kwargs)
  
      def observe(self, handler):
          if handler not in self._handelers:
              self._handelers.append(handler)
  
  
  mywidget = IntMultipliedDropdown(['apple', 'bed', 'cell'], 'cell')
  mywidget.observe(print)
  
  display(mywidget)
  print('default value:', mywidget.value)
  
  mywidget.value = '2 bed'
  </code></pre>
  
  <p>It works but has drawbacks. First, when I set <code>mywidget.value</code> the observed function is called two times: on number value change and on option value change.</p>
  
  <p>Second and worst is that I cannot use this widget in a Box widget like:</p>
  
  <pre><code>ipw.HBox([ipw.Label('Mylabel'), mywidget])
  </code></pre>
  
  <p>Which raises:</p>
  
  <pre><code>ValueError: Can't clean for JSON: &lt;__main__.IntMultipliedDropdown object at 0x7f7d604fff28&gt;
  </code></pre>
  
  <p>Is there a better solution?</p>