Bootstrap选择搜索不起作用。可能有一件小事我错过了。 我使用bootstrap select工作正常。选择来自database.added data-live-search =“true”的选项进行搜索无法正常工作。选择下拉列表不打开。
代码是
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<?php $sql = "select * from vehicle order by vehiclename";
$vehicle_list = $mysqli->query($sql);
$schematron_array['Level5'] == coming from different table ?>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<?php while( $row = $vehicle_list->fetch_array() ) {
if(!empty($row['vehiclename'])) {?>
<option value="<?php echo $row['vehiclename']; ?>" <?php echo ($schematron_array['Level5'] == $row['vehiclename'])?"selected":""; ?> >
<?php echo $row['vehiclename']; ?>
</option>
<?php } } ?>
</select>
感谢。 如果有任何错误,请原谅。
答案 0 :(得分:1)
可能有两个问题 - 1.缺少jQuery。 2.数据库没有返回任何行。
我使用了你的代码,应用了jQuery并提供了一些硬编码值,它工作正常。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<option value="">Vehicle 1</option>
<option value="">Vehicle 2</option>
<option value="">Vehicle 3</option>
<option value="">Vehicle 4</option>
<option value="">Vehicle 5</option>
</select>