最初の動的値は選択なしで変更を反映する必要があります

Question

私はid = 'event-spots'を持つdivを持っています。これは選択変更時に動的値でトリガーされます。 すべてがうまく動いているようです。しかし、残念ながら選択オプション入力フィールドの最初のオプションは既に入力フィールドに表示/選択されているため、選択できません。したがって、動的値をトリガーすることはありません。

他のオプションについては、onselect .changeメソッドがトリガされます。何もせずにgetSpots（）メソッドを既に実行する最初のオプションはどうすればよいですか？

Html 
<div class="uk-margin-bottom"> 
      {!! Form::label('event_id', 'Event', array('class' => 'uk-form-label')) !!} 
      {!! Form::select('event_id', $events, null, array('class' => 'uk-width-1-1', 'id' => 'event-event_id')) !!} 
      {!! $errors->first('product_id', '<p class="error">:message</p>') !!} 
      <p class="uk-form-help-block uk-text-muted">The event you're booking</p> 
     </div> 
<div class="uk-margin-bottom"> 
    <div id="event-spots"></div> 
</div> 

Javascript 
$("#event-event_id").change(function() { 
    getSpots(); 
}); 

function getSpots() { 
    var spots = $('#event-spots'); 
    spots.empty(); 
    spots.html('<p><i class="uk-icon-refresh uk-icon-medium uk-icon-spin"></i></p>'); 
    var event_id = $("#event-event_id").val(); 
    var code = ''; 
    console.log(event_id); 
    $.get("/1/users/spots/" + event_id, function(data) { 
     spots.empty(); 
     console.log(data); 

     code += '<label for="event_id" class="uk-form-label">Select Date</label><select class="uk-width-1-1" name="event_date" id="event-date" value="select">'; 
     $.each(data.spots, function(index, value) { 
      code += '<option value="' + value.event_date + '">' + value.event_date + '</option>'; 
     }); 
     code += '</select><p class="uk-form-help-block uk-text-muted">The spot you\'re booking</p>'; 
     spots.append(code); 

    }); 
} 

私のフォームはモーダルなので、私がモーダルを開くとすぐに、私は反映された変化を見たいと思います。

Answer 1

あなたは変更イベントをトリガすることができます。

function getSpots() { 
.. 
} 

$("#event-event_id").trigger("change");