Bootstrap模型未从所选选项中显示

时间:2018-08-02 04:57:35

标签: javascript php twitter-bootstrap-3 bootstrap-modal

我有一个正在尝试创建的引导表单,并且在从选定的下拉菜单选项中打开模型时遇到问题。

我可以使用它旁边的按钮链接来打开它,但是它在下拉菜单中不起作用。令人费解的另一件事是它可以在jsfiddle中使用,但不能在我的网站上使用。

任何线索将不胜感激

JSFiddle

这是我的add_job.php(零件文件),如果需要的话可以包括休息

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

这是来自functions.js的代码部分

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

编辑

更新的JS代码

因此在完成代码调试之后,我现在可以使其在IE,Firefox中运行,但仍然不能在chrome中运行

0 个答案:

没有答案