ایجاد لیست انتخاب شونده با مودال
سلام و قت بخیر ، من برای ایجاد فرم ثبت دوره ها و انتخاب یک مدرس مشکلی دارم ما تعداد خیلی زیادی مدرس داریم که برای آن استفاده از دراپ دان لیست خیلی جالب نمیاد که کاربر بخواهد تمام لیست را اسکرول کنه تا فرد مورد نظر را انتخاب کند ، در یک برنامه دیدم که یک مدال باز می‌شود و لیست مدرسین نمایش داده می‌شود و بعد از سرچ کاربر با زدن دکمه انتخاب که در کنار اسم مدرس هست آن انتخاب و مدال بسته و در فرم دوره ها نمایش داده می‌شود . من نمونه کدهای زیر را از این سایت پیدا کردم ولی نتونستم ازش استفاده نم . لطفا جهت ایجاد این روش من را راهنمایی بفرمایید. بسیار سپاسگزارم.
<!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>
نقل قول: ایجاد لیست انتخاب شونده با مودال
به جای این کدها اگر یک عکس می فرستادید بهتر می تونستیم راهنمایی کنیم
شما باید برای مدال، یک پارشیال ویو و یک کد برای نمایش مودال داشته باشید و برای ایجاد لیست انتخاب شونده، باید لیست آیتم های اون رو از طریق ویو مدل به پارشیال ویو پاس بدید و در پارشیال ویو، با استفاده از حلقه، اونها رو در تگ <option> بریزید
نقل قول: ایجاد لیست انتخاب شونده با مودال
سلام
شما لیست را فراخوانی کنید و به کمک select2 نمایش بدهید
که جستجو هم خیلی راحت است
