Bootstrap 4 selectpicker打開基於所選值的模態

Question

當我僅單擊顯示添加新承包商的選項時，我試圖通過選擇器（帶有實時搜索）來打開模型。 我的列表大約有20個選項，但是當我只希望它在具有addnewcon值的一個選項上打開時，它會打開然后對所有選項進行建模。 我似乎無法弄清楚代碼出了什么問題

因為默認的股票選擇器無法在BS4中正確加載，所以我決定使用這一選項。 在我的JSfiddle中，我知道搜索無法正常工作，但這導致了它不同的js文件。

靈活的Bootstrap 4下拉菜單

這是我的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">&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> </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 }); });

Answer 1

所以我找到了自己的解決方案，我認為這必須與JS有關，這就是我想出並起作用的方法。

//Add new contractor
$("#contractor").change(function () {
  if ($(this).val() === 'addnewcon') {
    $('#addnewconmodal').modal({show: true});
  } else if ($(this).val() !== 'addnewcon') {
    $('#addnewconmodal').modal({show: false});
}

});

Bootstrap 4 selectpicker打開基於所選值的模態

問題描述

1 個解決方案

解決方案1
0 2018-08-06 08:43:51

Bootstrap 4 selectpicker打開基於所選值的模態

問題描述

1 個解決方案

解決方案1 0 2018-08-06 08:43:51

解決方案1
0 2018-08-06 08:43:51