Question

我有这样的情况。我有一个包含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">&times;</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？任何帮助，它如此欣赏..

Answer 1

你可以使用包含同一div中值的文本框的隐藏div，当用户点击编辑时，你可以隐藏选择框并在jQuery的帮助下显示带有值的文本框。

Answer 2

您还可以添加或删除这两个元素，具体取决于您选择的ID可能导致问题。在两个元素。

Answer 3

在标签后面为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" />');
   });
});

在select选项和input.text之间切换输入html

3 个答案: