Javascript 引导模型未从所选选项中显示

我正在尝试创建一个引导表单，但在从所选下拉菜单选项打开模型时遇到问题

我可以让它打开旁边的按钮链接，但它不会在下拉菜单中工作。另一件令人费解的事情是，它在JSFIDLE中工作，但在我的站点上不工作

任何线索都将不胜感激

这是我的add_job.php（部分文件）如果需要可以包含rest

        <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>

编辑

更新的JS代码

---

因此，在我的代码中完成调试后，我现在可以让它在IE、Firefox中工作，但仍然不能在chrome中工作

正如您所提到的，上面提到的fiddle工作正常。不在您的网站中工作的唯一可能性是您使用的环境必须不同。您可以发布网站/环境链接，也可以调试代码以查看其不起作用的原因。您可以共享您的网站代码或url吗？我仅在设置过程中在本地计算机上以im身份运行网站。如果有什么不同，我会使用WAMP服务器吗？是的，我承认我只是一个新手，但是你如何调试代码来查看呢？好吧，这是一个小小的胜利，我找到了如何调试的方法，我让它在firefox中工作，但无法在chrome中工作。有什么原因吗？

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