个人中心
gpt4 book ai didi

javascript - Bootstrap 3 中的链式选择？

转载 作者：行者123 更新时间：2023-12-02 15:39:03 28 4
gpt4 key购买 nike

我试图在我的表单上放置一个链接选择，但我不能只在 Bootstrap 中执行此操作，并且我想知道我的代码是否错误，我正在遵循此站点中的代码 http://www.appelsiini.net/projects/chained

并尝试将其放入我的代码中，其形式尚未正确，但在这里:

<!DOCTYPE html>
<?php 
    include('connect.php');
    include('session.php');
    error_reporting(E_ALL);
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Autocomplete</title>
<meta name="viewport" content='width=700' content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">   </script>
    <script src="jquery.chained.min.js"></script>
    <!-- datepicker -->
    <link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <!-- bootstrap 3.0.2 -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="text.css.scss" rel="stylesheet" type="text/css" />
    <link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- DATA TABLES -->
    <link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script  src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/typeahead.js"></script> 
<style type='text/css'>
/* regular css */
.tabs {
    padding: 10px 2em
}

@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
.tabs {
    padding: 3px 1em
}
}
input, textarea {
    max-width:100%
}
WebFont.load({
google: {
    families: ['Open Sans']
}
});

.header {
    font-family: Arial
}
.wf-opensans-n4-active .header {
    font-family: 'Open Sans'
}
</style>

</head>
<body class="skin-blue">
    <select id="branch" name="branch">
        <option>
        <?php
        $sql1=mysql_query("SELECT * from branch")or die(mysql_error);
            while($row = mysql_fetch_array($sql1)){
                echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
            }
        ?>
        </option>
    </select>
<select id="service" name="service">
    <option>
        <?php
        $sql1=mysql_query("SELECT * from service")or die(mysql_error);
            while($row =    mysql_fetch_array($sql1)){
                echo "<option   value=".$row["service_id"]." class=".$row["branch_id"].">" .$row["service_name"]. "</option>";
            }
        ?>
    </option>
</select>
<script>
    $("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>

我把它放在上面想看看它是否能正常工作，但它不起作用？

工作代码在这里，没有 Bootstrap ，只是纯 HTML，

<html>
<head>
<?php include('connect.php'); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">       </script>
<script src="jquery.chained.min.js"></script>
</head>
<body>
    <select id="branch" name="branch">
        <option>
        <?php
        $sql1=mysql_query("SELECT * from branch")or die(mysql_error);
            while($row =   mysql_fetch_array($sql1)){
                echo "<option value=".$row["branch_id"]." class=".$row["branch_id"].">" .$row["branch_name"]. "</option>";
            }
        ?>
        </option>
    </select>

    <select id="service" name="service">
        <option>
        <?php
        $sql1=mysql_query("SELECT * from service")or die(mysql_error);
            while($row =   mysql_fetch_array($sql1)){
                echo "<option    value=".$row["service_id"]." class=".$row["branch_id"].">"   .$row["service_name"]. "</option>";
            }
        ?>
        </option>
    </select>
<script>
    $("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
</script>
</body>
</html>

我已经搜索了每个链接的选择，但我就是无法使其工作

最佳答案

在你的问题中，你说Chained select当没有 Bootstrap 原因时，您首先拥有 jQuery 库，正在运行第二个代码示例

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

原因Chained select在第一个代码示例中不起作用，因为就在 meta 之后您按以下顺序拥有此 JS 库

<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

请注意，上面的 jQuery 库位于 bootstrap-datetimepicker.fr.js 之后的第二位。如果您检查浏览器控制台日志，您将看到错误:Uncaught ReferenceError: $ is not defined

这真的是一团糟

<!-- datepicker -->
<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<!-- bootstrap 3.0.2 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />

你有 2 bootstrap.min.css因此，删除一个，您就已经包含了 bootstrap.js作为样式表链接 <link href="../../css/bootstrap.min.js" rel="stylesheet" type="text/css" />

记住jQuery 库始终排在第一位，因此将 jQuery 库放在顶部，然后 bootstrap library并且还首先包括 CSS然后全部JS库如下。

<!-- CSS -->

<link href="dp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="dp/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="text.css.scss" rel="stylesheet" type="text/css" />
<link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="../../css/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />

<!-- JS -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../css/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="jquery.chained.min.js"></script>

现在让我们修复 <select>元素。你有<option></option>里面<option></option>并且您缺少引号 ' 

<select id="service" name="service">
    <option>
    <?php
    $sql1=mysql_query("SELECT * from service")or die(mysql_error);
        while($row = mysql_fetch_array($sql1)){
            echo "<option  value=".$row["service_id"]." class=".$row["branch_id"].">".$row["service_name"]."</option>";
        }
    ?>
    </option>
</select>

所以删除<option></option>前后query将 PHP 与 HTML 混合并不是一个好习惯，所以这样做

<select id="service" name="service">
    <?php
    $sql1=mysql_query("SELECT * from service")or die(mysql_error);
        while($row = mysql_fetch_array($sql1)){
    ?>
    <option  value="<?php echo $row["service_id"];?>" class="<?php echo $row["branch_id"];?>"><?php echo $row["service_name"];?></option>
    <?php } ?>        
</select>

在其他 <select> 中进行相同的更改元素也是如此。

最后让脚本 DOM 准备就绪

<script>
$(document).ready(function() {
    $("#service").chained("#branch"); /* or $("#series").chainedTo("#mark"); */
});
</script>

注意:

  1. 始终检查浏览器控制台日志是否有错误。
  2. MySQL是 deprecated ，开始使用MySQLi

关于javascript - Bootstrap 3 中的链式选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32721308/

28 4 0
文章推荐： javascript - 根据所选选项显示 Div(带有计算值) - Angular
文章推荐： java - JNLP 推荐服务器
文章推荐： Datomic:您能说出它处理时间的能力的哪些用例
文章推荐： javascript - 如何在 Jasmine 测试中释放 AudioContext
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com