title: PHP with document.getElementById for to values in option tag
body: <p>I want to take the value of <strong>'id'</strong> from option tag .... How can I edit function. Every time I run it it gives id info but I want to show price info </p>
  
  <p>how can i edit  <code>var sel = document.getElementById('proID');</code>  </p>
  
  <p>this line please suggest me help     </p>
  
  <pre><code>&lt;tr&gt;
                      &lt;td&gt;&lt;label&gt;  Product : &lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;select id="proID" name="proID" &gt;
                             &lt;option&gt;Select Product&lt;/option&gt;
                                       &lt;?php
                                         $getProId = $pi-&gt;getAllProd();
                                          foreach($getProId as $pi){
                                          ?&gt;          
                              &lt;option value="&lt;?php echo $pi['proID'] ;?&gt;" id="&lt;?php echo $pi['proUPrice'];?&gt;"&gt;&lt;?php echo $pi['proName'] ;?&gt;&lt;/option&gt;
                                          &lt;?php } ?&gt;
                          &lt;/select&gt; 
                               &lt;input type="text" size="30" name="display" id="display" /&gt;
                               &lt;p&gt;
                              &lt;input type="button" id="showVal" value="Value Property" /&gt;     
                              &lt;/p&gt;    
                       &lt;/td&gt;              
                      &lt;/tr&gt;
  &lt;script&gt;(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 &lt; 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;    
      }   
  
  }());&lt;/script&gt;
  </code></pre>