此问题在此处已有答案：
How can I show a hidden div when a select option is selected?（10个答案）
25天前关闭
我有一个选择块，其中包含三个类别的元素和与这些类别相关联的div。我希望如果我们选择一个类别，与此类别相关联的div会显示。否则，让它们保持隐藏。我希望以下div：husband_name，number_name只有在我们选择pregnant_wife的时候才显示。但是当我这样做的时候，husband_name div工作正常，而不是number_bytes.这是代码：
<div class="modal-body row">
<form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data">
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('category'); ?></label>
<select class="form-control m-bot15" name="categorie" value='' id="category" onchange="changeCategorie()">
<option value="F#" > Sélect a category </option>
<option value="pregnant_wife" <?php
if (!empty($patient->category)) {
if ($patient->category== 'pregnantWife') {
echo 'selected';
}
}
?> > pregnant_wife </option>
<option value="Personnal" <?php
if (!empty($patient->category)) {
if ($patient->category== 'Personnal') {
echo 'selected';
}
}
?> > Personnal</option>
<option value="Other" <?php
if (!empty($patient->category)) {
if ($patient->category== 'Other') {
echo 'selected';
}
}
?> > Other</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('name'); ?></label>
<input type="text" class="form-control" name="name" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('email'); ?></label>
<input type="text" class="form-control" name="email" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6" id="divUsband">
<label for="exampleInputEmail1"><?php echo lang('name_husband'); ?></label>
<input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
</div>
<div class="form-group col-md-6" id="divEnfants">
<label for="exampleInputEmail1"><?php echo lang('number_pregnancy'); ?></label>
<input type="number" class="form-control" name="number_pregnancy" id="numberPregnancy" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('password'); ?></label>
<input type="password" class="form-control" name="password" id="exampleInputEmail1" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('address'); ?></label>
<input type="text" class="form-control" name="address" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('andtecedentMed'); ?></label>
<input type="text" class="form-control" name="andtecedentMed" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('andtecedentFam'); ?></label>
<input type="text" class="form-control" name="andtecedentFam" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('taille'); ?></label>
<input type="text" class="form-control" name="taille" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('poids'); ?></label>
<input type="text" class="form-control" name="poids" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('phone'); ?></label>
<input type="text" class="form-control" name="phone" id="exampleInputEmail1" value='' placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('sex'); ?></label>
<select class="form-control m-bot15" name="sex" value=''>
<option value="Masculin" <?php
if (!empty($patient->sex)) {
if ($patient->sex == 'Masculin') {
echo 'selected';
}
}
?> > Masculin </option>
<option value="Féminin" <?php
if (!empty($patient->sex)) {
if ($patient->sex == 'Féminin') {
echo 'selected';
}
}
?> > Féminin </option>
<option value="Autres" <?php
if (!empty($patient->sex)) {
if ($patient->sex == 'Autres') {
echo 'selected';
}
}
?> > Autres </option>
</select>
</div>
<div class="form-group col-md-6">
<label><?php echo lang('birth_date'); ?></label>
<input class="form-control form-control-inline input-medium default-date-picker" type="text" name="birthdate" value="" placeholder="" readonly="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('blood_group'); ?></label>
<select class="form-control m-bot15" name="bloodgroup" value=''>
<?php foreach ($groups as $group) { ?>
<option value="<?php echo $group->group; ?>" <?php
if (!empty($patient->bloodgroup)) {
if ($group->group == $patient->bloodgroup) {
echo 'selected';
}
}
?> > <?php echo $group->group; ?> </option>
<?php } ?>
</select>
</div>
<div class="form-group col-md-6">
<label for="exampleInputEmail1"><?php echo lang('doctor'); ?></label>
<select class="form-control js-example-basic-single" name="doctor" value=''>
<option value=""> </option>
<?php foreach ($doctors as $doctor) { ?>
<option value="<?php echo $doctor->id; ?>"><?php echo $doctor->name; ?> </option>
<?php } ?>
</select>
</div>
<div class="form-group last col-md-6">
<label class="control-label">Charger image</label>
<div class="">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="//www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> Selectionner image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Changer</span>
<input type="file" class="default" name="img_url"/>
</span>
<a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Enlever</a>
</div>
</div>
</div>
</div>
<!--
<div class="form-group last col-md-6">
<div style="text-align:center;" class="col-md-12">
<video id="video" width="200" height="200" autoplay></video>
<div class="snap" id="snap">Capture Photo</div>
<canvas id="canvas" width="200" height="200"></canvas>
Right click on the captured image and save. Then select the saved image from the left side's Select Image button.
</div>
</div>
-->
<!-- <div class="form-group col-md-6">
<input type="checkbox" name="sms" value="sms"> <?php echo lang('send_sms') ?><br>
</div> -->
<section class="col-md-12">
<button type="submit" name="submit" class="btn btn-info pull-right"><?php echo lang('submit'); ?></button>
</section>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>字符串
这是JavaScript代码：
var categorie = document.getElementById("categorie");
divUsband.style.display = 'none';
// divEnfants.style.display = 'none';
function changeCategorie() {
if (categorie.value == "FemmeEnceinte") {
divUsband.style.display = 'block';
// divEnfants.style.display = 'block';
} else {
divUsband.style.display = 'none';
// divEnfants.style.display = 'none';
}
}型
我想保持隐藏这两个div：直到我选择 * 怀孕_妻子 * 选项
1条答案
按热度按时间ctzwtxfj1#
首先，你在HTML中有很多错误。当你在一个元素上使用id属性时，它应该是唯一的。其他元素不应该有相同的id。你的select元素没有value属性。它们从用户选择的options元素中获取值。我对你的HTML做了一些修改，我有一个JavaScript脚本，可以隐藏和显示丈夫和孩子的div。
字符串
下面是根据用户选择的内容来处理显示和隐藏div的JavaScript。
型