JavaScript

jQuery optionの属性値で振る舞いを変える

jQuery

 

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>

 

 

 

 

 

 

 

爆速レンタルサーバならConoHa WING

 

サーバはプロに全部お任せ!「仕事」に専念したいあなたにおすすめです。

   

ConoHa VPSで運営してま🐱

 

サーバの勉強がしたいあなたにおすすめ!現役エンジニアの管理人が選んだ、WordPress運用に適したVPSの終着点

   

ConoHa VPSで爆速WordPressを作ろう! 

 

Laravel, AWS ポートフォリオ作成サポート! 定員3名

https://menta.work/plan/2381

Laravel, AWSによるポートフォリオ作成を通して、エンジニア転職をサポートします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)