オプションタグの値にするdocument.getElementByIdを持つPHP

Question

'id'の値をオプションタグから取得したいと思います....どのように機能を編集できますか？それは、ID情報を提供しますが、私は

どのように私はvar sel = document.getElementById('proID');

この行を編集することができ、価格情報を表示したい、私はそれを実行するたびに、私は

<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

ここでは、純粋なJavaScriptのソリューションです。選択したオプションIDのIDを取得します。ここで

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

はフィドル https://jsfiddle.net/1n9u8782/1/

Answer 2

はの属性を選択するために、サンプルを確認して助けて提案してください選択したオプション..

$(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>