もくじ
jQuery
$(document).ready(function(){ App.init(); modify_period(); }); $('#select_section').change(function() { modify_period(); }); function modify_period() { var period = $('[name=section_id] option:selected').attr('period'); if(period == "first"){ $('#score-label1').text("1月"); $('#score-label2').text("2月"); $('#score-label3').text("3月"); $('#score-label4').text("4月"); $('#score-label5').text("5月"); $('#score-label6').text("6月"); $('#form-score1').attr('name', 'score1') $('#form-score2').attr('name', 'score2') $('#form-score3').attr('name', 'score3') $('#form-score4').attr('name', 'score4') $('#form-score5').attr('name', 'score5') $('#form-score6').attr('name', 'score6') } else { $('#score-label1').text("7月"); $('#score-label2').text("8月"); $('#score-label3').text("9月"); $('#score-label4').text("10月"); $('#score-label5').text("11月"); $('#score-label6').text("12月"); $('#form-score1').attr('name', 'score7') $('#form-score2').attr('name', 'score8') $('#form-score3').attr('name', 'score9') $('#form-score4').attr('name', 'score10') $('#form-score5').attr('name', 'score11') $('#form-score6').attr('name', 'score12') } }
$('[name=section_id] option:selected')
名前がsection_idのセレクトボックスで選択されているoptionタグ
$('[name=section_id] option:selected').attr('period');
上記optionタグのperiodという値を取得する
if(period == "first"){
その値がfirstだったら…の処理
HTML(Laravel Blade)
<div class="form-group"> <label class="col-sm-2 control-label">所属</label> <div class="col-sm-9"> <select class="form-control" id="select_section" name="section_id"> @foreach ($sections as $section) <option value="{{ $section->section_id }}" period="{{ $section->period }}">{{ $section->section_name }} ({{ $section->year }}/{{ ($section->period === 'first') ? 'H1' : 'H2' }})</option> @endforeach </select> <input type="hidden" name="year_period" value="{{ $section->year }},{{ $section->period }}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label1">1月KPI</label> <div class="col-sm-9"> <input type="text" name="score1" class="form-control" value="" id="form-score1" numberOnly required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label2">2月KPI</label> <div class="col-sm-9"> <input type="text" name="score2" class="form-control" value="" id="form-score2" numberOnly required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label3">3月KPI</label> <div class="col-sm-9"> <input type="text" name="score3" class="form-control" value="" id="form-score3" numberOnly required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label4">4月KPI</label> <div class="col-sm-9"> <input type="text" name="score4" class="form-control" value="" id="form-score4" numberOnly required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label5">5月KPI</label> <div class="col-sm-9"> <input type="text" name="score5" class="form-control" value="" id="form-score5" numberOnly required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" id="score-label6">6月KPI</label> <div class="col-sm-9"> <input type="text" name="score6" class="form-control" value="" id="form-score6" numberOnly required> </div> </div>