在引导程序3中链接选择？

时间：2015-09-22 15:47:43

标签： javascript php jquery twitter-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>

我搜索了每个链接的选择，但我不能让它工作

2 个答案:

答案 0 :(得分：2)

在你的问题中，你说Chained select正在使用第二个代码示例，当没有引导原因你首先拥有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

答案 1 :(得分：0)

我知道这是一个老帖子，但我认为它会帮助像我这样的人

使用jQuery可以轻松完成链接选择框。这就是我所做的。

HTML 

<select id=select_1>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id=select_2>
  <option>2-1</option>
  <option>2-2</option>
  <option>2-3</option>
</select>

<select id=select_3>
  <option>3-1</option>
  <option>3-2</option>
  <option>3-3</option>
</select>

现在是jQuery的一部分。当其中一个选择发生变化时，您所要做的就是触发更改方法。

$('#select_1').on('change', function(){
    $('#select_2').val(1).trigger('change'); //change value of second select and trigger change function
});
$('#sub_category').on('change', function(){
    $('#select_3').val('2);
});
</script>

多数民众赞成。 干杯

相关问题
最新问题