0

選択できる会議の長さに基づいて、終了時間のドロップダウン値を取得しようとしています。したがって、私のコードは次のようになります。

<tr>
    <th>Start:</th>
    <td><input type="text" id="start" name="start"/></td>
</tr>
<tr>
    <th>Length of meeting</th>
    <td>
       <select name="meeting" id="meeting" onClick="interval()">
          <option value="">--Select length--</option>
       </select>
    </td>
</tr>
<tr>
    <th>End:</th>
    <td><input type="text" id="end" name="end"></td>
</tr>

<script>
$(function() { 
    $('#start').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM'
    });

    $('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':???(how to pass my value from meeting dropdown here?)
     });
   });

   function interval(){
    var meeting = $('#meeting').val();
    if(meeting == ''){
        $('#meeting').empty();
        $('#meeting').append('<option value="">--Select length--</option>');
        for(var i=5; i <= 60; i+=5){
            $('#meeting').append('<option value="'+i+'">'+i+'   min'+'</option>');
        }   
    }
}
</script>

そのため、開始時刻を選択してから、動的に作成される会議の長さを選択して、終了時刻を取得する必要があります。私の会議の間隔は5分から60分です。したがって、開始時刻を午前 8 時に選択し、会議の長さを 15 分とすると、終了時刻は 15 分間隔で取得する必要があります。したがって、最後のドロップダウンの最初の値は午前 8 時 15 分、次に午前 8 時 30 分などになります。とりあえず、end timepicker 'step':15 で mt 値をハードコーディングすることができました。必要なのは、会議の長さの値を渡し、その方法で終了時間を増やしたいということです。誰かがこれを手伝ってくれるなら、私は感謝します。前もって感謝します。

4

1 に答える 1

1

option:selected現在のオプションの値を見つけるために使用します。

$('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':$('#meeting').find('option:selected').val()
     });

[編集]

実はうまくいかないことが多かったので、jsfiddleを作成しました

を使用してプログラムで作成されるようにイベントバインディングを変更しました

$('#meeting').bind('change', function () {
     setEndTime();
  });

次に、setEndTime を次のように定義します。

function setEndTime() {
     var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0),
             selectedTime = $('#start').timepicker('getTime');
      selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
        $('#end').timepicker('setTime', selectedTime);
  }

次に、#meeting ドロップダウンの初期化を最初に変更します。

for (var i = 5; i <= 60; i += 5) {
    $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
  }

また、ステップを 5 の固定値に設定し、$('#start') にイベントを追加しました。

$('#start').on('changeTime', function () {
    setEndTime();
  });

このようにして、開始時間または期間を変更すると、自動的に更新されます。

終了時間ピッカーのステップも変更された最終バージョン: http://jsfiddle.net/20m6b7qz/5/

于 2015-12-03T22:17:39.447 に答える