title: How modal box show by mouse click in select box at the Laravel?
body: <p>I wish to show modal box when mouse clicked to "Andre..." at the list select box in the Laravel code as below. but this is not working. Could you tell me where is incorrect to work?</p>
  
  <p><strong>Select Box</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JUzWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JUzWt.png" alt="enter image description here"></a></p>
  
  <p><strong>Variable define in Controller</strong></p>
  
  <pre><code>$job_types = DB::table('jobs')-&gt;pluck('job_type')
                      -&gt;unique(function ($item){
                          return $item;
                        });;
  </code></pre>
  
  <p><strong>HTML(Laravel Blade)</strong></p>
  
  <pre><code>Job Type Field
  &lt;div class="form-group col-sm-4" id="job_type"&gt;
      {!! Form::label('job_type', 'Type:') !!}
  
      {!! Form::select('job_type', $job_types, null, ['class' =&gt; 'form-control', 'id' =&gt; 'job_type']) !!}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Modal view</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="jobListModal"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;
            &lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Set in new job type.&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;New Job type:&lt;/p&gt;
            &lt;input type="text" id="textInput"&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" id="btnSave" class="btn btn-primary"&gt;Edit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
    &lt;/div&gt;
    &lt;!-- /.modal --&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('#job_type').on('change', function (e) {
      if ('Another' == this.value) {
          $("#jobListModal").modal("show");
      }
  });
  $('#btnSave').click(function () {
      var newType = $('input#textInput').val();
      $('select#job_type option:last')
          .after('&lt;option value="' + newType + '" selected="selected" &gt;' + newType + '&lt;/option&gt;');
      $('#jobListModal').modal('hide');
  });
  </code></pre>
  
  <p><strong>Inspection</strong></p>
  
  <p><a href="https://i.stack.imgur.com/wDeDO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wDeDO.png" alt="enter image description here"></a></p>