title: JQuery/Javascript -- show div based on select but NOT value
body: <p>I am using PHP to dynamically populate a select box (a list of equipment). The value is set with the ID of the item selected so I can use it later in my programming.</p>
  
  <p>What I need help with...</p>
  
  <p>Based on the item selected I need to show/hide one of two form fields but I can't use the value as this is the id. </p>
  
  <p>What I need to be able to do is read the text in the select box which will contain the item name with either (Service: Set by dates) or (Service: Set by hours) and show either the form field for the date or the form field for the hours?</p>
  
  <p>Is this possible? I can find loads great resources based on the value but not on the text in the select.</p>
  
  <p>I think something like this should work but not sure how to use the text in the select rather than the value.</p>
  
  <pre><code>$(function() {
  $('#system').change(function(){
  $('.system').hide();
  $('#' + $(this).val()).show();
  });
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated!!!!</p>
  
  <p>Regards</p>
  
  <p>Matt</p>
  
  <p>(N.B this is what I'm working with at the mo based on the answers so far, thank you all so much for the help (and for your example Louys Patrice Bessette) - not quite there yet... I was getting an error and managed to track it back to the script not getting the result from the select box. See below now working code! Thanks all!!!</p>
  
  <pre><code>&lt;div class="col"&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="system_select"&gt;Equipment or System to be serviced&lt;/label&gt;
  &lt;select class="form-control" name="system_select" id="system_select"&gt;
  &lt;option&gt;&lt;/option&gt;
  &lt;?php
  $systems = DB::getInstance()-&gt;get('ym_system', 'vessel_id', '=', $vid);
  foreach ($systems-&gt;results() as $system) {
  ?&gt;&lt;option data-type="&lt;?php echo $system-&gt;service_type ?&gt;" value="&lt;?php echo $system-&gt;system_id ?&gt;"&gt;&lt;?php echo $system-&gt;system_name; ?&gt;&lt;/option&gt; &lt;?php
  }
  ?&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $( document ).ready(function() {
  $("#due_dates").hide();   // Hide both divs
  $("#due_hours").hide();   // Hide both divs
  $('#system_select').change(function(){
  var dataType = $(this).find(':selected').attr('data-type')  // should be "Set by dates" or "Set by hours"
  if (dataType == 'Set by dates') {
  $("#due_hours").hide();
  $("#due_dates").show();
  } else if (dataType == 'Set by hours') {
  $("#due_dates").hide();
  $("#due_hours").show();
  }
  });
  });
  &lt;/script&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-3" id="due_date"&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="service_date"&gt;Next Service (Set by dates)&lt;/label&gt;
  &lt;input type="date" class="form-control" name="service_date" id="service_date" value="&lt;?php echo escape(Input::get('service_date')); ?&gt;" autocomplete="off"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" id="due_hour"&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="service_hours"&gt;Next Service (Set by hours)&lt;/label&gt;
  &lt;input type="number" class="form-control" name="service_hours" id="service_hours" value="&lt;?php echo escape(Input::get('service_hours')); ?&gt;" autocomplete="off"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>