I am facing an issue with a selectpicker that has live search functionality. I want to trigger a modal to open only when the user clicks on the option that says "Add new contractor." However, this modal is currently opening for all options, even though I only want it to open for the one with the value "addnewcon." I'm having trouble identifying what's wrong with the code.
Since the default selectpicker isn't working correctly in BS4, I've opted to use a different one. Please note that the search function isn't functioning in my JSFiddle link due to it referencing a different JS file.
Flexible Bootstrap 4 Dropdown
Here's a link to my JSFiddle for reference:
JSfiddle
Below is the code for the selectpicker:
<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>
(Remaining HTML code omitted for brevity)
</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>Below is my JavaScript code to trigger the modal:
$("#contractor").change(function() {
if ($(this).val() === 'addnewcon') {
$('#addnewcon').modal('show');
}
});