Bootstrap模式未显示在所选选项中

Question

I Have a bootstrap form I'm trying to create and having problems with opening a model from a selected drop-down menu option.

I can get it to open with the button link next to it but it won't work in the drop-down menu. The other thing that's puzzling is it works in a jsfiddle but not on my site.

Any clues would be appreciated

JSFiddle

Here is my add_job.php(part file) can include rest if required

        <div class="panel-body">
         <div class="col-md-12 col-md-offset-1">
          <div class="row">
          <div class="help-block with-errors"></div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="form_contractor">Select Contractor *</label>
                    <select class="selectpicker form-control" data-live-search="true" id="contractor" name="contractor" required="required" data-error="Contractor is required.">
                            <option value="">Please select contractor *</option>
                            <option value="addnewcon">Add new Contractor</option>
                            <?php  foreach ($all_contractors as $con): ?>
                              <option value="<?php echo $con['ID'] ?>">
                                <?php echo $con['Name'] ?>
                              </option>
                             <?php endforeach; ?>
                    </select>
                <div class="help-block with-errors"></div>
              </div>
            </div>

      <!-- Modal -->
<div id="addnewcon" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem omnis aliquid voluptatibus, distinctio soluta eligendi officiis voluptatem necessitatibus magnam illum.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

            <div class="col-md-1">
              <div class="form-group">
                <label for="form_addnewcon"></label><BR><BR>
                <button type="button" data-toggle="modal" data-target="#addnewcon">Add new</button>
                <div class="help-block with-errors"></div>

And here is the section of code from my functions.js

$("#contractor").change(function () {        
if($(this).val() == 'addnewcon'){
    $('#addnewcon').modal({show: true});
}});

EDIT

Updated JS code

So after working out the debug in my code, I can now get it to work in IE, Firefox but still not working in chrome