PHP - 根据从选项中选择的内容获取值

Question

<select class="selectpicker" name="mscr_type" id="mscr_type">

            <?php $fpp_type = '';
                  foreach ($getmilestone_cr as $mscr_list) {

                  $description = $mscr_list['FIX_PRJ_DESC'];//fetch  description

                    if ($fpp_type != $mscr_list['FIX_PRJ_TYPE']) {
                        if ($fpp_type != '') {
                            echo '</optgroup>';
                    }

                    if($mscr_list['FIX_PRJ_TYPE'] == 'MS'):
                        echo $fpp_label = "Milestone";
                    elseif($mscr_list['FIX_PRJ_TYPE'] == 'CR'):
                        echo $fpp_label = "Change Request(CR)";
                    endif;

                    echo '<optgroup label="'.$fpp_label.'">';

                    }

                    echo '<option value="'.$mscr_list['FIX_PRJ_TYPE'].'">'.htmlspecialchars($mscr_list['FIX_PRJ_NAME']).'</option>';
                    $fpp_type = $mscr_list['FIX_PRJ_TYPE'];    
                }

                    if ($fpp_type != '') {
                        echo '</optgroup>';
                    }
            ?>
</select>

The above code outputs:

<select class="selectpicker">
    <optgroup label="Picnic">
      <option value ="1">Mustard</option>
      <option value ="2">Ketchup</option>
      <option value ="3">Relish</option>
    </optgroup>
    <optgroup label="Camping">
      <option value ="4">Tent</option>
      <option value ="5">Flashlight</option>
      <option value ="6">Toilet Paper</option>
    </optgroup>
  </select>

How could I fetch description based on what is selected from selected option. For example if Mustard is selected, then input value should be filled with value 'Mustard is yellow in color'.

Tried using <select class="selectpicker" name="mscr_type" id="mscr_type" onchange="document.getElementById('mscr_description').value=this.options[this.selectedIndex].text"> but it fetches the name and not description.

<label for="name" class="label">Description</label>  
<input type="text" disabled="" id="selectpicker_description" name="selectpicker_description" class="span3">

Answer 1

Add the description to the HTML using a data-XXX attribute:

echo '<option value="'.$mscr_list['FIX_PRJ_TYPE'].'" data-description="'.htmlspecialchars($description).'">'.htmlspecialchars($mscr_list['FIX_PRJ_NAME']).'</option>';

Then you can use

onchange="updateDescription(this)"

with the Javascript function:

function updateDescription(sel) {
    var output = document.getElementById('mscr_description');
    var desc = sel.options[sel.selectedIndex].getAttribute('data-description');
    output.value = desc;
}