お世話になります。

タイトルのように２つの内容が同じセレクトボックスを並べて、
前半の選択された値以降を後半ので選択可能にしたいと思っております。

コードは以下です。
例えば、firstで3が選択されたら、secondでは4,5のみ選択可能したいです。

PHP
1<?= $this->Form->input('first', [
2    'type' => 'select',
3    'class' => 'first',
4    'label' => false,
5    'options' => [0,1,2,3,4,5],
6]); ?>
7<?= $this->Form->input('second', [
8    'type' => 'select',
9    'class' => 'second',
10    'label' => false,
11    'options' => [0,1,2,3,4,5],
12]); ?>

CakePHP独自のdisableの方法としてオプションに「'disabled' => [0, 1]」を入れる方法があると思うのですが、それを動的に変更することが可能なのかもお分かりの方、教えていただきたいです。

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

UIとして動的に処理するならjavascriptにやらせるのが妥当です。
ただしjavascriptを最小限に抑えるために、最初のselectboxの
変更をトリガーにajaxで２番めのselectboxを持ってきてもよいかと。

追記

javascript
1<script>
2$(function(){
3  $('[name=a]').on('change',function(){
4    var idx=$(this).prop('selectedIndex');
5    $('[name=b]').prop('selectedIndex',0);
6    $('[name=b] option').prop('disabled',false).filter(function(i){
7      return (i>0 && i<=idx);
8    }).prop('disabled',true);
9  }).trigger('change');
10});
11</script>
12<form>
13<select name="a">
14<option value="">--</option>
15<option value="1">1</option>
16<option value="2">2</option>
17<option value="3">3</option>
18<option value="4">4</option>
19<option value="5">5</option>
20</select>
21<select name="b">
22<option value="">--</option>
23<option value="1">1</option>
24<option value="2">2</option>
25<option value="3">3</option>
26<option value="4">4</option>
27<option value="5">5</option>
28</select>
29<input type="submit" value="go">
30</form>