使用Bootstrap輸入的標簽無法正常工作

Question

我正在嘗試通過bootstrap掌握標簽輸入功能，並且顯然缺少一些東西！ 我嘗試按照字母的說明操作文檔，但未能使其正常工作-輸入始終僅顯示為值列表，而不是標簽。 因此，我嘗試復制一個顯然可以正常工作的JS小提琴示例，但是當我將代碼復制到代碼編輯器中時，也會發生同樣的事情。 我相信我已經包括了對所需庫的所有引用，但顯然做錯了。 這是我的測試代碼：

 $(document).ready(function() { $('#defaultForm') .find('[name="cities"]') // Revalidate the color when it is changed .change(function(e) { console.warn($('[name="cities"]').val()); console.info($('#aa').val()); console.info($("#aa").tagsinput('items')); var a = $("#aa").tagsinput('items'); console.log(typeof(a)); console.log(a.length); $('#defaultForm').bootstrapValidator('revalidateField', 'cities'); }) .end() .find('[name="cities1"]') // Revalidate the color when it is changed .change(function(e) { console.warn($('[name="cities1"]').val()); console.info($('#aa1').val()); console.info($("#aa1").tagsinput('items')); var a = $("#aa1").tagsinput('items'); console.log(typeof(a)); console.log(a.length); $('#defaultForm').bootstrapValidator('revalidateField', 'cities1'); }) .end() .bootstrapValidator({ excluded: ':disabled', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { cities: { validators: { notEmpty: { message: 'Please enter at least one city you like the most' } } }, cities1: { validators: { callback: { message: 'Please choose 2-4 color you like most', callback: function(value, validator) { // Get the selected options var options = validator.getFieldElements('cities1').tagsinput('items'); // console.info(options); return (options !== null && options.length >= 2 && options.length <= 4); } } } } } }) .on('success.form.bv', function(e) { // Prevent form submission e.preventDefault(); }); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script> <form id="defaultForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-lg-3 control-label">Cities</label> <div class="col-lg-5"> <input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Cities 1</label> <div class="col-lg-5"> <input type="text" name="cities1" id="aa1" class="form-control" value="Amsterdam1,Washington1,Sydney1,Beijing1,Cairo1" data-role="tagsinput" /> </div> </div> <div class="form-group"> <div class="col-lg-5 col-lg-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </form> 

任何指針將不勝感激，因為這讓我發瘋了！！！

Answer 1

我相信我已經包括了對所需庫的所有引用，但顯然做錯了。

第一部分是不正確的，第二部分是正確的。

由於缺少主libraries因此尚未將所有引用添加到libraries

1. 所有腳本所依賴的jquery庫。
2. 我看到您正在使用帶有下拉菜單的bootstrap ，並且它們要求popper.js能夠正常工作，並且如果您通過按F12在console注意到，則會收到錯誤消息

未捕獲的錯誤：Bootstrap下拉列表需要Popper.js（ https://popper.js.org ）

所以你應該包括希望它正常工作，前后為包括從波普爾所有依賴CDN鏈接不包含比任何其他umd版本使用時CDN鏈接其他版本有問題看到這里 ，你應該加載腳本按照以下順序，它將起作用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>