【发布时间】：2018-08-06 16:43:51
【问题描述】：
当我只单击“添加新承包商”选项时，我试图让一个选择器（带有实时搜索）打开一个模型。我的列表大约有 20 个选项长，但是当我只希望它在具有 value addnewcon 的选项上打开时，它会打开然后对所有选项进行建模。我似乎无法弄清楚代码有什么问题
因为默认的股票选择器在 BS4 中无法正确加载，我决定使用这个。在我的 JSfiddle 中，我知道搜索不起作用，但这会导致它的 js 文件不同。
Flexible Bootstrap 4 Dropdown
这是我的 JSfiddle 的链接
JSfiddle
这是我的选择器代码
<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>这是我打开模态的JS
$("#contractor").change(function() {
$(this).val() === 'addnewcon'
$('#addnewcon').modal({
show: true
});
});【问题讨论】：
标签： javascript bootstrap-4 bootstrap-modal