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;
});
});<body>
<div class="container">
<br />
<h3 align="center">Multiple drug prescription</a></h3><br />
<br />
<br />
<div align="right" style="margin-bottom:5px;">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
</div>
<br />
<form method="post" id="user_form">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="user_data">
<tr>
<th>Drug Name</th>
<th>Drug Unit</th>
<th>Morning</th>
<th>Day</th>
<th>evening</th>
<th>bedtime</th>
<th>Duration in days</th>
<th>Prescribed</th>
<th>Qty in stock</th>
</tr>
</table>
</div>
<div align="center">
<input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
</div>
</form>
<br />
</div>
<div id="user_dialog" title="Add prescriprion">
<div class="form-group">
<label>Drug Name</label>
<select name='drugselect 'class="form-control" id="drugselect">
<option selected hidden disabled>Please select your drug
<option value="1" data-unit="mg" data-quantity="50" data-form="tablet">Abutilon
<option value="2" data-unit="mg" data-quantity="20" data-form="injection">Pramaxil
<option value="3" data-unit="ml" data-quantity="30" data-form="suppository">Exylichnine
<option value="4" data-unit="mg" data-quantity="1" data-form="cream">BoronHydroxil
<option value="5" data-unit="mg" data-quantity="100" data-form="tablet">Dexaclam
?>
</select>
<span id="error_drgdn" class="text-danger"></span>
</div>
<div class="form-group">
<label>Drug Unit</label>
<input type="text" name="Drugunit" id="Drugunit" class="form-control" />
<span id="error_drgu" class="text-danger"></span>
</div>
<div class="form-group">
<label>Drug Form</label>
<input type="text" name="Drugfm" id="Drugfm" class="form-control" />
<span id="error_drgu" class="text-danger"></span>
</div>
<div class="form-group">
<label>Morn</label>
<input type="text" name="drgmorn" id="drgmorn" class="form-control" />
<span id="error_drgmrn" class="text-danger"></span>
</div>
<div class="form-group">
<label>Day</label>
<input type="text" name="drgday" id="drgday" class="form-control" />
<span id="error_drgd" class="text-danger"></span>
</div>
<div class="form-group">
<label>even</label>
<input type="text" name="drgeve" id="drgeve" class="form-control" />
<span id="error_drge" class="text-danger"></span>
</div>
<div class="form-group">
<label>bedtime</label>
<input type="text" name="drgbdt" id="drgbdt" size ="5" class="form-control" />
<span id="error_drgbt" class="text-danger"></span>
</div>
<div class="form-group">
<label>days</label>
<input type="text" size ="5" name="drgpdays" id="drgpdays" class="form-control" />
<span id="error_drgdys" class="text-danger"></span>
</div>
<div class="form-group">
<label>prescribe</label>
<input type="text" name="drgpriscript" id="drgpriscript" class="form-control" />
<span id="error_drgpre" class="text-danger"></span>
</div>
<div class="form-group">
<label>in stock</label>
<input type="text" name="drginstock" id="drginstock" class="form-control" />
<span id="error_drgqis" class="text-danger"></span>
</div>
<div class="form-group" align="center">
<input type="hidden" name="row_id" id="hidden_row_id" />
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
<div id="action_alert" title="Action">
</div>
</div>
</body>我正在寻找一个在引导窗口上将表值填充到多个输入文本的解决方案，输入文本在表单之外，并且在一个类'form-group'中。
我想要的是，当我选择选项值时，同一id上的表中的某些值也必须显示在类form-group内的其他文本框上。我所展示的函数只在输入文本在表单内时起作用。
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Multiple drug prescription</a></h3><br />
<br />
<br />
<div align="right" style="margin-bottom:5px;">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
</div>
<br />
<form method="post" id="user_form">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="user_data">
<tr>
<th>Drug Name</th>
<th>Drug Unit</th>
<th>Morning</th>
<th>Day</th>
<th>evening</th>
<th>bedtime</th>
<th>Duration in days</th>
<th>Prescribed</th>
<th>Qty in stock</th>
</tr>
</table>
</div>
<div align="center">
<input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
</div>
</form>
<br />
</div>
<div id="user_dialog" title="Add prescriprion">
<div class="form-group">
<label>Drug Name</label>
<select name='drugselect 'class="form-control" id="drugselect">
<option >Please select your drug
<?php
$sqlx = mysqli_query($con,"select
`drugID`,
`d`.`drugName` as `dname` ,
`catName` as cname,
`drugCategory` as dcat,
`units` as dunits,
`stockqty`
from `drug` `d` JOIN `category` `c` on `d`.`drugCategory` = `c`.`catID` JOIN `pharmacy` `p` on `d`.`drugID` = `p`.`drug` WHERE `p`.`stockqty` >0 ");
while ($rowx=mysqli_fetch_array($sqlx)){
printf(
'<option value="%d" data-cname="%s" data-stockqty="%d" data-dcat="%d" data-dunits="%s" data-dname="%s">%s',
$rowx['drugID'],
$rowx['cname'],
$rowx['stockqty'],
$rowx['dcat'],
$rowx['dunits'],
$rowx['dname'],
$rowx['dname']
);
}
//}
?>
</select>
<span id="error_drgdn" class="text-danger"></span>
</div>
<div class="form-group">
<label>Drug Unit</label>
<input type="text" name="Drugunit" id="Drugunit" class="form-control" />
<span id="error_drgu" class="text-danger"></span>
</div>
<div class="form-group">
<label>Drug Form</label>
<input type="text" name="Drugfm" id="Drugfm" class="form-control" />
<span id="error_drgu" class="text-danger"></span>
</div>
<div class="form-group">
<label>Morn</label>
<input type="text" name="drgmorn" id="drgmorn" class="form-control" />
<span id="error_drgmrn" class="text-danger"></span>
</div>
<div class="form-group">
<label>Day</label>
<input type="text" name="drgday" id="drgday" class="form-control" />
<span id="error_drgd" class="text-danger"></span>
</div>
<div class="form-group">
<label>even</label>
<input type="text" name="drgeve" id="drgeve" class="form-control" />
<span id="error_drge" class="text-danger"></span>
</div>
<div class="form-group">
<label>bedtime</label>
<input type="text" name="drgbdt" id="drgbdt" size ="5" class="form-control" />
<span id="error_drgbt" class="text-danger"></span>
</div>
<div class="form-group">
<label>days</label>
<input type="text" size ="5" name="drgpdays" id="drgpdays" class="form-control" />
<span id="error_drgdys" class="text-danger"></span>
</div>
<div class="form-group">
<label>prescribe</label>
<input type="text" name="drgpriscript" id="drgpriscript" class="form-control" />
<span id="error_drgpre" class="text-danger"></span>
</div>
<div class="form-group">
<label>in stock</label>
<input type="text" name="drginstock" id="drginstock" class="form-control" />
<span id="error_drgqis" class="text-danger"></span>
</div>
<div class="form-group" align="center">
<input type="hidden" name="row_id" id="hidden_row_id" />
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
<div id="action_alert" title="Action">
</div>
</div>
</body>
下面的函数工作时，input框在一个形式，但我希望下面的功能发生在一个引导窗口。
<script>
document.addEventListener('DOMContentLoaded', e => {
let oForm = document.forms.admin;
document.querySelector('select[name="drugselect"]').addEventListener('change', function(e) {
let option = this.options[this.options.selectedIndex];
oForm.Instock.value = option.dataset.stockqty;
oForm.catgname.value = option.dataset.cname;
oForm.drugCategory.value = option.dataset.dcat;
oForm.Drugunit.value = option.dataset.dunits;
oForm.DrugName.value = option.dataset.dname;
});
});
</script>
请帮我想个办法。
如果我理解正确，意图是在用户更改select菜单中的选择时，在select菜单下填充input元素。上面的第一部分HTML的特点是我在回答最初的问题时使用的虚拟数据和Javascript，所以我已经扩展了我使用的数组数据来创建以下内容。
构建菜单的PHP数据的使用方式与前面的答案相同，并产生如下面的代码片段所示的选择菜单。
我必须承认我做了一些假设，因为我并不完全清楚真正的问题是什么。例如-我假设数据库查询应该返回比代码中显示的更多的信息-毕竟为什么要将input元素命名为它们，否则如果这些不是要填充的字段?!
$drugs=array(
array(
'unit'=>'kg',
'morning'=>2,
'day'=>2,
'evening'=>2,
'bedtime'=>2,
'prescriber'=>'Dr. Bob',
'days'=>14,
'id'=>1,
'name'=>'Abutilon',
'price'=>'25',
'form'=>'tablet',
'quantity'=>50,
'manufacturer'=>'ACME Drugs Corp'
),
array(
'unit'=>'mg',
'morning'=>4,
'day'=>4,
'evening'=>4,
'bedtime'=>2,
'prescriber'=>'Dr. John',
'days'=>365,
'id'=>2,
'name'=>'Pramaxil',
'price'=>'50',
'form'=>'injection',
'quantity'=>20,
'manufacturer'=>'ACME Cybernautics Division'
),
array(
'unit'=>'lb',
'morning'=>1,
'day'=>1,
'evening'=>1,
'bedtime'=>1,
'prescriber'=>'Dr. Radish',
'days'=>28,
'id'=>3,
'name'=>'Exylichnine',
'price'=>'150',
'form'=>'suppository',
'quantity'=>30,
'manufacturer'=>'ACME Corporate Greed Division'
),
array(
'unit'=>'kg',
'morning'=>6,
'day'=>2,
'evening'=>9,
'bedtime'=>2,
'prescriber'=>'Dr. Womble',
'days'=>7,
'id'=>4,
'name'=>'BoronHydroxil',
'price'=>'55',
'form'=>'cream',
'quantity'=>1,
'manufacturer'=>'ACME Famine Feasibility'
),
array(
'unit'=>'ton',
'morning'=>2,
'day'=>2,
'evening'=>2,
'bedtime'=>2,
'prescriber'=>'Dr. Saskia',
'days'=>30,
'id'=>5,
'name'=>'Dexaclam',
'price'=>'10',
'form'=>'tablet',
'quantity'=>100,
'manufacturer'=>'ACME Drugs Corp'
)
);
const q=(e,n=document)=>n.querySelector(e);
q('select[name="drugselect"]').addEventListener('change', function(e) {
let option = this.options[ this.options.selectedIndex ];
for( let attr in option.dataset ){
let input=q('.form-group input[data-name="'+attr+'"]');
if( input )input.value=option.dataset[attr];
}
});<div id='user_dialog' title='Add prescriprion'>
<div class='form-group'>
<label>Drug Name</label>
<select name='drugselect' class='form-control'>
<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"
data-unit="kg"
data-morning="2"
data-day="2"
data-evening="2"
data-bedtime="2"
data-prescriber="Dr. Bob"
data-days="14"
>Abutilon
<option
value="2"
data-price="50"
data-quantity="20"
data-manufacturer="ACME Cybernautics Division"
data-form="injection"
data-unit="mg"
data-morning="4"
data-day="4"
data-evening="4"
data-bedtime="2"
data-prescriber="Dr. John"
data-days="365"
>Pramaxil
<option
value="3"
data-price="150"
data-quantity="30"
data-manufacturer="ACME Corporate Greed Division"
data-form="suppository"
data-unit="lb"
data-morning="1"
data-day="1"
data-evening="1"
data-bedtime="1"
data-prescriber="Dr. Radish"
data-days="28"
>Exylichnine
<option
value="4"
data-price="55"
data-quantity="1"
data-manufacturer="ACME Famine Feasibility"
data-form="cream"
data-unit="kg"
data-morning="6"
data-day="2"
data-evening="9"
data-bedtime="2"
data-prescriber="Dr. Womble"
data-days="7"
>BoronHydroxil
<option
value="5"
data-price="10"
data-quantity="100"
data-manufacturer="ACME Drugs Corp"
data-form="tablet"
data-unit="ton"
data-morning="2"
data-day="2"
data-evening="2"
data-bedtime="2"
data-prescriber="Dr. Saskia"
data-days="30"
>Dexaclam
</select>
<span id='error_drgdn' class='text-danger'></span>
</div>
<div class='form-group'>
<label>Drug Unit</label>
<input type='text' name='Drugunit' class='form-control' data-name='unit' />
<span id='error_drgu' class='text-danger'></span>
</div>
<div class='form-group'>
<label>Drug Form</label>
<input type='text' name='Drugfm' class='form-control' data-name='form' />
<span id='error_drgu' class='text-danger'></span>
</div>
<div class='form-group'>
<label>Morn</label>
<input type='text' name='drgmorn' class='form-control' data-name='morning' />
<span id='error_drgmrn' class='text-danger'></span>
</div>
<div class='form-group'>
<label>Day</label>
<input type='text' name='drgday' class='form-control' data-name='day' />
<span id='error_drgd' class='text-danger'></span>
</div>
<div class='form-group'>
<label>even</label>
<input type='text' name='drgeve' class='form-control' data-name='evening' />
<span id='error_drge' class='text-danger'></span>
</div>
<div class='form-group'>
<label>bedtime</label>
<input type='text' name='drgbdt' size ='5' class='form-control' data-name='bedtime' />
<span id='error_drgbt' class='text-danger'></span>
</div>
<div class='form-group'>
<label>days</label>
<input type='text' size='5' name='drgpdays' class='form-control' data-name='days' />
<span id='error_drgdys' class='text-danger'></span>
</div>
<div class='form-group'>
<label>prescribe</label>
<input type='text' name='drgpriscript' class='form-control' data-name='prescriber' />
<span id='error_drgpre' class='text-danger'></span>
</div>
<div class='form-group'>
<label>in stock</label>
<input type='text' name='drginstock' class='form-control' data-name='quantity' />
<span id='error_drgqis' class='text-danger'></span>
</div>
<div class='form-group' align='center'>
<input type='hidden' name='row_id' />
<button type='button' name='save' id='save' class='btn btn-info'>Save</button>
</div>
<div id='action_alert'></div>
</div>为了将输入元素链接到drugselect菜单中选择的option，我使用了与数组中的键相同的data-name属性。这与在sql查询中使用column名称相同。如果不正确，您可以添加数据库模式和示例数据。