JavaScript的 - 如何將表中的數據傳遞到模態選擇選項？

Question

對不起，我以前的英語不好。我已經將數據傳遞給模態引導程序。並已成功傳遞數據到輸入模態。但我不知道如何進入選擇選項模態。

該怎麼辦？並在數據選擇選項中顯示。

在此先感謝

這裏我的一些代碼：

獲取從表中的數據：

<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 --> 

Answer 1

使用

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>