PHP with document.getElementById for to values in option tag

Question

I want to take the value of 'id' from option tag .... How can I edit function. Every time I run it it gives id info but I want to show price info

how can i edit var sel = document.getElementById('proID');

this line please suggest me help

<tr>
                    <td><label>  Product : </label></td>
                    <td>
                        <select id="proID" name="proID" >
                           <option>Select Product</option>
                                     <?php
                                       $getProId = $pi->getAllProd();
                                        foreach($getProId as $pi){
                                        ?>          
                            <option value="<?php echo $pi['proID'] ;?>" id="<?php echo $pi['proUPrice'];?>"><?php echo $pi['proName'] ;?></option>
                                        <?php } ?>
                        </select> 
                             <input type="text" size="30" name="display" id="display" />
                             <p>
                            <input type="button" id="showVal" value="Value Property" />     
                            </p>    
                     </td>              
                    </tr>
<script>(function() {

    // get references to select list and display text box
    var sel = document.getElementById('proID');
    var el = document.getElementById('display');


    function getSelectedOption(sel) {
        var opt;
        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
            opt = sel.options[i];
            if ( opt.selected === true ) {
                break;
            }
        }
        return opt;
    }

    // assign onclick handlers to the buttons
    document.getElementById('showVal').onclick = function () {
        el.value = sel.value;    
    }   

}());</script>

Answer 1

check the sample to select the attribute of selected option..

 $(document).on('change', '#proID', function(){ var val = $('option:selected', this).attr('value'); console.log(val); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="proID" name="proID" > <option>Select Product</option> <option value="val11" id="1000">sample11</option> <option value="val22" id="2000">sample22</option> </select> 

Answer 2

Here is pure javascript solution to get id of selected option id.

select = document.getElementById('proID');
var selectedOpt = select.options[select.selectedIndex];
alert(selectedOpt.id); 

Here is fiddle https://jsfiddle.net/1n9u8782/1/