jquery - 選択したオプションに基づいて表示内容を変更する

Question

これを変更するにはどうすればよいですか ( http://jsfiddle.net/jRAAg/2/ ) ドロップダウンから選択した組み合わせに応じて、上記の異なる値が表示されるようにします。たとえば、「男性」と「18 ～ 24 歳」だけを選択した場合、その選択に対応するスコアのみが表示されます。前もって感謝します！

コード：

<div id="segmentscore" data-gender="1" data-age="0">100</div>
<div id="segmentaware" data-gender="1" data-age="0">150</div>

<div id="segmentscore" data-gender="1" data-age="2">190</div>
<div id="segmentaware" data-gender="1" data-age="2">100</div>


<div id="select1">
    <select id="genderlist">
      <option value="0"></option>
      <option value="1">Male</option>
      <option value="2">Female</option>
  </select></div>
  <div id="select2"><select id="agelist">
    <option value="0"></option>
      <option value="1">12-17</option>
      <option value="2">18-24</option>
      <option value="3">25-34</option>
      <option value="4">35-44</option>
      <option value="5">45-54</option>
      <option value="6">55-99+</option>
  </select></div>

JQuery

$('#genderlist').on('change', function() {
  $('[data-gender]').each( function(index, element) {
    element.style.display = 'none'
  })
  gender = $('#genderlist')[0].value 
  $('[data-gender='+gender+']').each( function(index, element) {
    element.style.display = 'block'
  })
})
$('#agelist').on('change', function() {
  $('[data-age]').each( function(index, element) {
    element.style.display = 'none'
  })
  age = $('#agelist')[0].value
  $('[data-age='+age+']').each( function(index, element) {
    element.style.display = 'block'
  })
})