흔히하는 그거다...첫 번째 셀렉트 박스 선택하면 그 값에 따라서 두 번째 셀렉트 박스 값이 달라지는 것.
보통은 html과 javascript 혹은 jQuery로 하는데...여기서 cakephp3가 들어가니 영 복잡해지더라.
ajax를 사용해서 비동기 프로그래밍이니 뭐시기 하는데 복잡해서 패스...무려 3일 끙끙대며 어찌어찌 만들었다..휴우..
방법은 컨트롤러에 함수를 하나 만들어서 첫 번째 셀렉트 박스 값이 변할 때 그 id를 가져와서 db를 긁어온다.
긁어온 값을 가지고 foreach와 echo로 <option> 태그를 만든 후 그 값을 뷰에 뿌렸다.
그리고 수정할 때는 기존에 선택한 값이 있으므로 그 값을 페이지 로딩할 때 가져다가 jQuery로 셀렉트박스 선택하게끔 하는 방법으로 하니 어찌어찌 움직이더라..cakephp3 에서 제공하는 formhelper로 하려고 했는데 마음대로 안 되더라..
뭐, 움직이니까 됐다!! ㅋ
> ParticipantController.php
|
public function getOptions($id = null)
{
$this->autoRender = false;
$this->viewBuilder()->setLayout(false);
$courses = $this->Participant->Course->getOptions($id);
if($courses)
{
echo "<option>(学科を選択してください。)</option>";
foreach($courses as $key => $value)
{
$key = '"'. $key .'"';
echo "<option value=$key>$value</option>";
}
}
else {
echo "<option>(学科を選択してください。)</option>";
}
}
|
> CourseTable.php
|
public function getOptions($id = null)
{
$result = ["" => "選択してください"];
if(!empty($id))
{
$result = $this->find('list', ['keyField' => 'course_idx', 'valueField' => 'course_name'])
->where(['section_idx' => $id])
->andWhere(['is_used' => 1])
}
return $result;
}
|
>add.ctp 또는 edit.ctp
|
// add.ctpやedit.ctpの中、結局に空っぽのチェックボックスを作るだけになる。
<?php
if(isset($courses))
{
echo $this->Form->input('course_idx',
['empty' => '(学科を選択してください。)','class'=>'form-group','id' => 'course_idx', 'label' => false]
);
}
else
{
echo $this->Form->select('course_idx',
['options' => ''],
['empty' => '(学科を選択してください。)','class'=>'form-group','id' => 'course_idx', 'label' => false]
);
}
?>
<script>
$(function(){
$('#section_idx').ready(function() {
var id = $('#section_idx').val();
$('#course_idx').load('../getOptions/'+id,(function(){
var idx = <?php echo json_encode(h($participant->course_idx), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
$('#course_idx').val(idx);
}));
});
});
// 学部セレクトボックスを変更すると学科セレクトボックスを更新する。
$(function(){
$('#section_idx').bind('change keyup', function() {
var id = $('#section_idx').val();
$('#course_idx').load('../getOptions/'+id);
});
});
</script>
|
댓글
댓글 쓰기