我有一个页面，你可以添加产品，零件，材料和包装。 当在产品上选择排序(pm_sort)时，它应该显示产品信息，但当选择零件时，它也应该显示产品信息。 我得到了以下代码:

<select required  class='selectpicker form-control border' name='pm_sort' id='pm_sort' value="<?php echo isset($_POST['pm_sort']) ? htmlspecialchars($_POST['pm_sort'], ENT_QUOTES) : "";  ?>">
               <option selected="true" disabled="disabled" value="">Select sort...</option>
                   <option>Product</option>
                   <option>Material</option>
                   <option>Part</option>
                   <option>Packaging</option>        
           </select>

<div class='Product' id='Product' || id='Part'>
   <h3>Product information</h3>
<input type='text' name='pm_code' class='form-control' value="<?php echo isset($_POST['pm_code']) ? htmlspecialchars($_POST['pm_code'], ENT_QUOTES) : "";  ?>" />
</div>

<div class='material' id='material'>
   <h3>Material information</h3>
<input type='text' name='pm_code_m' class='form-control' value="<?php echo isset($_POST['pm_code_m']) ? htmlspecialchars($_POST['pm_code_m'], ENT_QUOTES) : "";  ?>" />
</div>

<div class='Packaging' id='Packaging'>
   <h3>Material information</h3>
<input type='text' name='pm_code_p' class='form-control' value="<?php echo isset($_POST['pm_code_p']) ? htmlspecialchars($_POST['pm_code_p'], ENT_QUOTES) : "";  ?>" />
</div>


<script type='text/javascript'>
$('div').hide()

$('#pm_sort').change(function () {
     var value = this.value;
   $('div').hide()
   $('#' + this.value).show();
});
</script>

问题是:如何基于选择值部分或产品获得相同的页面信息？