在select选项和input.text之间切换输入html
Toggle an input html between select option and input.text
我有这样的情况。我有一个包含html表单的模式引导程序。有了这个模式,用户可以创建一个新的数据,或者只编辑已经存在的数据。这是html:
<button type="button" id="add_eir" class="btn btn-block btn-sm btn-flat bg-navy-active"><i class="fa fa-pencil"></i> Add</button>
<button class='btn btn-xs btn-default btnEdit' value='$row->REPAIR_ESTIMATE_ID'>Edit</button>
这是用户添加新数据时的引导模式:
<div class="modal fade fullscreen " id="modal_form" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">No Inspeksi : </h4>
</div>
<?php echo form_open('', array('id' => 'upload_eir', 'class' => "form-horizontal")); ?>
<div class="modal-body form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="no_inspection" class="col-sm-2 col-md-2 control-label">Nomor</label>
<div class="col-sm-10 col-md-10">
<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">
<option></option>
<?php
foreach ($all_inspection_belum_eor as $row) :
echo "<option value='$row->NO_INSPECTION'> $row->NO_SURAT ( $row->PREFIX - $row->SERIAL_NUMBER ) </option>";
endforeach;
?>
</select>
</div>
</div>
<div class="form-group">
<label for="comments" class="col-sm-2 control-label">Hasil Survey</label>
<div class="col-sm-10">
<textarea class="form-control" rows="14" placeholder="Hasil Survey" name="comments" id="comments"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
请参阅模态体中的选项。现在,我如何在编辑操作中将此选择选项更改为通用输入文本?
所以,当用户选择编辑时,选择选项将更改为输入文本,但仍在相同的id中,即no_inspection
?如有任何帮助,不胜感激。。
您可以使用一个隐藏的div,其中包含在同一div中具有值的文本框,当用户单击编辑时,您可以在jQuery的帮助下隐藏选择框并显示具有值的文字框。
您还可以根据选择的内容添加或删除这两个元素。相同的ID可能会导致问题。在两个元素中。
在标签后为div添加一个id属性,如下所示:
<div class="form-group">
<label for="no_inspection" class="col-sm-2 col-md-2 control-label">Nomor</label>
<div class="col-sm-10 col-md-10" id="detachit">
<select data-placeholder="Pilih no inpeksi..." class="form-control chosen-select" name="no_inspection" id="no_inspection" style="width:250px;" tabindex="2">
<option></option>
<?php
foreach ($all_inspection_belum_eor as $row) :
echo "<option value='$row->NO_INSPECTION'> $row->NO_SURAT ( $row->PREFIX - $row->SERIAL_NUMBER ) </option>";
endforeach;
?>
</select>
</div>
</div>
然后在"编辑"按钮中添加一个id(例如:id="add_eir")。
然后使用以下Jquery函数:
$(function(){
$("#add_eir").on('click',function(){
$("#detachit").html("");
$("#detachit").append('<input type="text" id="no_inspection" />');
});
});
相关文章:
- Angularjs$编译输入html或元素
- 将输入 html 元素动态关联到颜色选取器
- 如何使用 JavaScript 显示 html 输入:.html(' < input type=“text” /
- 在输入 HTML 表单上从 Java 脚本传递参数
- 如何根据用户输入 HTML 更新多个 SPAN 元素
- 如何计算输入 HTML 元素的宽度,使其与其内容的大小相匹配
- 如何在输入 html 中编写一个 js var 值
- Javascript:如何获取所选复选框的所有值,推送到数组,然后放入输入HTML元素
- 如何使用Javascript自动输入html中行的序列号
- 特殊的点屏蔽输入 HTML-JavaScript
- 在select选项和input.text之间切换输入html
- 隐藏输入(html表单确认)-服务器端脚本?(php)
- 验证用户输入HTML子集
- 在KeyUp上输入HTML/JavaScript密码,用于浏览器自动填充
- 按钮内文本输入- HTML
- 在ie10,9中选择选项(html 5标签)在下一个输入(html 5标签)的位置
- 有麻烦输入html列表选项从xml文件
- 在非输入html标签上使用ng-keyup
- 在表数据中输入Html文本
- 中心文件输入- Html/Css