ایجاد لیست انتخاب شونده با مودال
سلام و قت بخیر ، من برای ایجاد فرم ثبت دوره ها و انتخاب یک مدرس مشکلی دارم ما تعداد خیلی زیادی مدرس داریم که برای آن استفاده از دراپ دان لیست خیلی جالب نمیاد که کاربر بخواهد تمام لیست را اسکرول کنه تا فرد مورد نظر را انتخاب کند ، در یک برنامه دیدم که یک مدال باز می‌شود و لیست مدرسین نمایش داده می‌شود و بعد از سرچ کاربر با زدن دکمه انتخاب که در کنار اسم مدرس هست آن انتخاب و مدال بسته و در فرم دوره ها نمایش داده می‌شود . من نمونه کدهای زیر را از این سایت پیدا کردم ولی نتونستم ازش استفاده نم . لطفا جهت ایجاد این روش من را راهنمایی بفرمایید. بسیار سپاسگزارم.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Trigger the modal with a button -->
<br> <br>
<button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal">Show Record</button> <br> <br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<form id="form1">
<div class="form-group">
<input type="Hidden" name="ID" class="form-control">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" name="Name" class="form-control">
</div>
<div class="form-group">
<label>Bday</label>
<input type="text" name="Bday" class="form-control">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" name="Age" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="Submit" class="btn btn-success">
</div>
</form>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table" id="example">
<thead>
<tr>
<th>Name</th>
<th>Bday</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name2</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name3</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name4</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name5</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name6</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name7</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name8</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name9</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name10</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name11</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var table= $('#example').DataTable();
var tableBody = '#example tbody';
$(tableBody).on('click', 'tr', function () {
var cursor = table.row($(this));//get the clicked row
var data=cursor.data();// this will give you the data in the current row.
$('form').find("input[name='Name'][type='text']").val(data[0]);
$('form').find("input[name='Bday'][type='text']").val(data[1]);
$('form').find("input[name='Age'][type='number']").val(data[2]);
} );
</script>
</html>
پاسخ با نقل قول
