当我仅单击添加新承包商的选项时，我正在尝试选择一个选择器（通过实时搜索）来打开模型。我的列表大约有20个选项，但是当我只希望它在具有addnewcon值的一个选项上打开时，它会打开然后对所有选项进行建模。我似乎无法弄清楚代码出了什么问题
因为默认的股票选择器不能在BS4中正确加载，所以ive决定使用此选择器。而且在我的JSfiddle中，我知道搜索无法正常运行，但这导致了它的js文件不同。
Flexible Bootstrap 4 Dropdown
这是我的JSfiddle的链接
JSfiddle
这是我的selectpicker代码
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php [NC,L]
这是我的JS，用于打开模式
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<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-3">
<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>
</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">×</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>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_location">Location/Project Name *</label>
<input id="form_location" type="text" name="location" class="form-control" placeholder="Please enter job location *" required="required" data-error="Location is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="form_address">Address</label>
<input id="form_address" type="text" name="address" class="form-control" placeholder="Please enter job address">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="form_bore_length">Bore Length *</label>
<input id="form_bore_length" type="number" name="length" class="form-control" placeholder="Estimate *" required="required" data-error="Bore length is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="form_groundc">Assumed Ground Conditions *</label>
<select class="form-control" name="groundc" required="required" data-error="Ground Conditions required">
<option value="">Assumed ground condition *</option>
<option value="Clay">Clay</option>
<option value="Mudstone">Mudstone</option>
<option value="Rock">Rock</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="form_jobstatus">Job Status *</label>
<select class="form-control" name="jobstatus" required="required" data-error="Job Status Required">
<option value="">Current job status *</option>
<?php foreach ($all_jobstatus as $jobstat): ?>
<option value="<?php echo (int)$jobstat['ID'] ?>">
<?php echo $jobstat['Status'] ?>
</option>
<?php endforeach; ?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="form_start_date">Select Start Date(If Known)</label>
<input type="date" class="form-control" name="startdate">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<p class="text-muted">
<B><strong>*</strong> These fields are required.</B>
</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</body>
答案 0 :(得分：0)
所以我找到了自己的解决方案，我认为这必须与JS有关，这就是我想出并可以解决的问题。
//Add new contractor
$("#contractor").change(function () {
if ($(this).val() === 'addnewcon') {
$('#addnewconmodal').modal({show: true});
} else if ($(this).val() !== 'addnewcon') {
$('#addnewconmodal').modal({show: false});
}
});