时间戳

首页 > 解决方案 > 如何使用 document.getElementById 使用组合框选择显示表格中的文本字段

javascript - 如何使用 document.getElementById 使用组合框选择显示表格中的文本字段

问题描述

我有一个组合框，它正在从表中收集字段，我想使用选定的 id 在不同的文本框中显示其他值。get Element By Id 只返回一个字段。

    <?php
    $druglquery = "SELECT ID,DrugName,DrugForm  FROM DrugsInformation ";
    $druglresult = $mysqli->druglquery($druglquery) ; //onchange='submitForm();'
    ?>

    <select style='width:242px;'  id="dcodeID"  onchange="onselectchange();">
    <option value=''></option>
    <?php

    $row = $druglresult->fetch_array(MYSQLI_BOTH);
    printf ("%s (%s)\n", $row[0], $row["DrugName"]);

    ?>

    </select>

    <script> 
    function onselectchange() 
    {
    var d=document.getElementById("dcodeID")
    var diplaytext=d.options[d.selectedIndex].text;
    document.getElementById("test").value=diplaytext;
    alert(" ok ok");
    }


    </script>

使用相同的 id 我想有类似下面的东西 

    <script> 
    function onselectchange() 
    {
    var d=document.getElementById("dcodeID")
    var diplaytext=d.options[d.selectedIndex].text;
    document.getElementById("test").value=diplaytext;
    document.getElementById("test2").value=diplaytext;
    document.getElementById("test3").value=diplaytext;
    alert(" ok ok");
    }


    </script>

标签： javascriptphphtmlarraystypescript

解决方案

如果我理解正确，那么我希望以下内容可以提供一些指导，以帮助解决您在实际代码中遇到的问题。

<?php

    # a static array to emulate a basic recordset
    # this is just dummy data

    $drugs=array(
        array('id'=>1,  'name'=>'Abutilon','price'=>'25',       'form'=>'tablet',       'quantity'=>50,     'manufacturer'=>'ACME Drugs Corp' ),
        array('id'=>2,  'name'=>'Pramaxil','price'=>'50',       'form'=>'injection',    'quantity'=>20,     'manufacturer'=>'ACME Cybernautics Division' ),
        array('id'=>3,  'name'=>'Exylichnine','price'=>'150',   'form'=>'suppository',  'quantity'=>30,     'manufacturer'=>'ACME Corporate Greed Division' ),
        array('id'=>4,  'name'=>'BoronHydroxil','price'=>'55',  'form'=>'cream',        'quantity'=>1,      'manufacturer'=>'ACME Famine Feasibility' ),
        array('id'=>5,  'name'=>'Dexaclam','price'=>'10',       'form'=>'tablet',       'quantity'=>100,    'manufacturer'=>'ACME Drugs Corp' )
    );
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <script>
            document.addEventListener('DOMContentLoaded',e=>{

                let oForm=document.forms.admin;

                document.querySelector('select[name="drugs"]').addEventListener('change',function(e){
                    let option=this.options[this.options.selectedIndex];

                    oForm.price.value=option.dataset.price;
                    oForm.quantity.value=option.dataset.quantity;
                    oForm.form.value=option.dataset.form;
                    oForm.manufacturer.value=option.dataset.manufacturer;
                });
            });
        </script>
    </head>
    <body>
        <form name='admin' method='post'>
            <table>
                <tr>
                    <td>
                        <select name='drugs'>
                            <option selected hidden disabled>Please select your drug
                            <?php
                                /* emulate iterating through recordset */
                                foreach( $drugs as $arr ){
                                    printf(
                                        '<option value="%d" data-price="%s" data-quantity="%d" data-manufacturer="%s" data-form="%s">%s', 
                                        $arr['id'],
                                        $arr['price'],
                                        $arr['quantity'],
                                        $arr['manufacturer'],
                                        $arr['form'],
                                        $arr['name']
                                    );
                                }
                            ?>
                        </select>                   
                    </td>
                    <td>
                        <label>Price: <input type='text' name='price' /></label>
                    </td>
                    <td>
                        <label>Quantity: <input type='text' name='quantity' /></label>
                    </td>
                    <td>
                        <label>Form: <input type='text' name='form' /></label>
                    </td>
                    <td>
                        <label>Manufacturer: <input type='text' name='manufacturer' /></label>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


document.addEventListener('DOMContentLoaded',e=>{

  let oForm=document.forms.admin;

  document.querySelector('select[name="drugs"]').addEventListener('change',function(e){
    let option=this.options[this.options.selectedIndex];

    oForm.price.value=option.dataset.price;
    oForm.quantity.value=option.dataset.quantity;
    oForm.form.value=option.dataset.form;
    oForm.manufacturer.value=option.dataset.manufacturer;
  });
});
<form name='admin' method='post'>
  <table>
    <tr>
      <td>
        <select name='drugs'>
          <option selected hidden disabled>Please select your drug
          <option value="1" data-price="25" data-quantity="50" data-manufacturer="ACME Drugs Corp" data-form="tablet">Abutilon
          <option value="2" data-price="50" data-quantity="20" data-manufacturer="ACME Cybernautics Division" data-form="injection">Pramaxil
          <option value="3" data-price="150" data-quantity="30" data-manufacturer="ACME Corporate Greed Division" data-form="suppository">Exylichnine
          <option value="4" data-price="55" data-quantity="1" data-manufacturer="ACME Famine Feasibility" data-form="cream">BoronHydroxil
          <option value="5" data-price="10" data-quantity="100" data-manufacturer="ACME Drugs Corp" data-form="tablet">Dexaclam
        </select>					
      </td>
      <td>
        <label>Price: <input type='text' name='price' /></label>
      </td>
      <td>
        <label>Quantity: <input type='text' name='quantity' /></label>
      </td>
      <td>
        <label>Form: <input type='text' name='form' /></label>
      </td>
      <td>
        <label>Manufacturer: <input type='text' name='manufacturer' /></label>
      </td>
    </tr>
  </table>
</form>

推荐阅读