我创建了下拉列表，其中包含实验室、药房、健身房、食品字段。当我从下拉列表中选择实验室时，它会生成新字段“名称”。 当我选择药房字段时，它必须显示上传按钮字段。请建议我如何执行此操作。
我的表单
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab"><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
最佳答案
如果你想在选择一个选项时显示/隐藏某些特定字段并且你不希望页面刷新，你应该使用 JavaScript 代码，例如如果你想在选择“实验室”值时显示上传字段你可以这样做:
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
document.getElementById('fileToUpload').style.display = "block";
else
document.getElementById('fileToUpload').style.display = "none";
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>
如果你想显示/隐藏更多字段，你可以使用相同的逻辑!
<!doctype html>
<head>
<script>
function showHidden(elem){
if(elem.value == 'Lab')
{
document.getElementById('fileToUpload').style.display = "block";
document.getElementById('city_name').style.display = "none";
}
else if(elem.value == 'Hospital')
{
document.getElementById('city_name').style.display = "block";
document.getElementById('fileToUpload').style.display = "none";
}
else
{
document.getElementById('fileToUpload').style.display = "none";
document.getElementById('city_name').style.display = "none";
}
}
</script>
</head>
<body>
<form action="<?php echo $this->getFormAction(); ?>" id="quickservice" method="post" enctype="multipart/form-data">
<div class="fieldset">
<ul class="form-list">
<li>
<label for="Servicetype" class="required"><em>*</em><?php echo $this->__('Service Type') ?></label>
<div class="input-box">
<select id='servicetype' onchange="showHidden(this)" name="servicetype" class="input-text required-entry validate-select" style="width: 150px;" />
<option value=""><?php echo $this->__('--Please Select--')?></option>
<option value="Lab" id='lab'><?php echo $this->__('Lab')?></option>
<option value="Hospital"><?php echo $this->__('Hospital')?></option>
<option value="Food"><?php echo $this->__('Food')?></option>
<option value="Gym"><?php echo $this->__('Gym')?></option>
<option value="Physio"><?php echo $this->__('Physio')?></option>
<option value="Nurse"><?php echo $this->__('Nurse')?></option>
</select>
</div>
</li>
</ul>
<div id="fileToUpload" style='display: none;'>
<input type="file" name="fileToUpload" />
</div>
<div id="city_name" style='display: none;'>
<input type="text" name="city" />
<input type="text" name="name" />
</div>
<div class="button">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button id= "submit" type="submit" class="button" title="<?php echo $this->__('Submit') ?>" name="send" id="send2"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
</div>
</form>
</body>
关于javascript - 如何通过选择下拉值来生成字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33754746/