JavaScript的 - 如何将表中的数据传递到模态选择选项？

问题描述：

对不起，我以前的英语不好。我已经将数据传递给模态引导程序。并已成功传递数据到输入模态。但我不知道如何进入选择选项模态。JavaScript的 - 如何将表中的数据传递到模态选择选项？

该怎么办？并在数据选择选项中显示。

在此先感谢

这里我的一些代码：

获取从表中的数据：

<a href="javascript:;" 
    data-id="<?php echo $s1['sub_menuid']?>" 
    data-mainid="<?php echo $s1['main_menuid']?>" 
    data-nama="<?php echo $s1['nama_submenu']?>" 
    data-link="<?php echo $s1['link']?>" 
    data-icon="<?php echo $s1['icon']?>" 
    class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit"> 
    <i class="ace-icon fa fa-pencil bigger-130"></i> 
    </a>

突入模式通过JavaScript

$('#modal-edit').on('show.bs.modal', function (event) { 
      var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan 
      var modal   = $(this) 

      // Isi nilai pada field 
      modal.find('#sub_menuid').attr("value",div.data('id')); 
      modal.find('#main_menuid').attr("value",div.data('mainid')); 
      modal.find('#nama_submenu').attr("value",div.data('nama')); 
      modal.find('#link').attr("value",div.data('link')); 
      /*modal.find('#icon').attr("value",div.data('icon'));*/ 
     });

模式编辑：这里

<div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> 
        <h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4> 
       </div> 
       <form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form"> 
        <div class="modal-body"> 
         <div class="form-group"> 
          <label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label> 
          <div class="col-md-8"> 
           <input type="hidden" id="sub_menuid" name="sub_menuid"> 
           <input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label> 
          <div class="col-md-8"> 
           <select class="form-control" id="main_menuid" name="main_menuid"> 
           <option value=""></option> 
           <?php foreach($main_menu as $mm) { ?> 
           <option value="<?php echo $mm['main_menuid']?>"><?php echo ucwords($mm['nama_mainmenu'])?></option> 
           <?php } ?> 
           </select> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="col-md-3 col-sm-2 control-label">Link</label> 
          <div class="col-md-8"> 
           <input type="text" id="link" class="form-control" name="link" placeholder="link"> 
          </div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button> 
         <button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan&nbsp;</button> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
    <!-- END Modal edit -->

答

使用

modal.find("#main_menuid").val(div.data('mainid'));

是一个示例。

$('#modal-edit').on('show.bs.modal', function (event) { 
 
      var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan 
 
      var modal   = $(this) 
 

 
      // Isi nilai pada field 
 
      modal.find('#sub_menuid').attr("value",div.data('id')); 
 
      modal.find("#main_menuid").val(div.data('mainid')); 
 
      modal.find('#nama_submenu').attr("value",div.data('nama')); 
 
      modal.find('#link').attr("value",div.data('link')); 
 
      /*modal.find('#icon').attr("value",div.data('icon'));*/ 
 
     });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a href="javascript:;" 
 
    data-id="1" 
 
    data-mainid="3" 
 
    data-nama="abcd" 
 
    data-link="abcd" 
 
    data-icon="abcd" 
 
    class="green" data-toggle="modal" data-target="#modal-edit" data-rel="tooltip" title="Edit"> 
 
    <i class="ace-icon fa fa-pencil bigger-130"></i>click me 
 
    </a> 
 
    
 
    
 
    <div aria-hidden="true" aria-labelledby="ModalLabel" role="dialog" tabindex="-1" id="modal-edit" class="modal fade"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> 
 
        <h4 class="modal-title"><b>Edit Sub Menu Level 1</b></h4> 
 
       </div> 
 
       <form class="form-horizontal" id="form-edit" action="<?php echo base_url('sub_menu_level_1/edit')?>" method="post" enctype="multipart/form-data" role="form"> 
 
        <div class="modal-body"> 
 
         <div class="form-group"> 
 
          <label class="col-md-3 col-sm-2 control-label">Nama Sub Menu</label> 
 
          <div class="col-md-8"> 
 
           <input type="hidden" id="sub_menuid" name="sub_menuid"> 
 
           <input type="text" id="nama_submenu" class="form-control" name="nama_submenu" placeholder="Nama menu"> 
 
          </div> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label class="col-md-3 col-sm-2 control-label">Pilih Main Menu</label> 
 
          <div class="col-md-8"> 
 
           <select class="form-control" id="main_menuid" name="main_menuid"> 
 
           <option value="1">val1</option> 
 
           
 
           <option value="2">val2</option> 
 
           <option value="3">val3</option> 
 
           
 
           </select> 
 
          </div> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label class="col-md-3 col-sm-2 control-label">Link</label> 
 
          <div class="col-md-8"> 
 
           <input type="text" id="link" class="form-control" name="link" placeholder="link"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="modal-footer"> 
 
         <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button> 
 
         <button id="btn-submit-edit" class="btn btn-info" type="submit"> Simpan&nbsp;</button> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div>

JavaScript的 - 如何将表中的数据传递到模态选择选项？

相关推荐