个人中心
gpt4 book ai didi

javascript - javascript 文件应该放在 codeigniter 目录中的什么位置？

转载 作者：行者123 更新时间：2023-12-03 10:26:36 25 4
gpt4 key购买 nike

很抱歉，如果这个问题是重复的，我已经阅读了大多数类似的问题，但它没有解决我的问题。我有使用 Angular js 的依赖下拉列表的代码，我试图在我的 codeigniter 项目中实现。当我将此代码直接放入 View form.php 中时，我得到了预期的结果。

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function CountryController($scope) {
            $scope.countries = {
                'India': {
                    'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
                    'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],  
                },
                'USA': {
                  'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
                  'Los Angeles': ['Burbank', 'Hollywood']
                },
                'Australia': {
                    'New South Wales': ['Sydney','Orange','Broken Hill'],
                    'Victoria': ['Benalla','Melbourne']
                }
            };
        }
    </script>
    </head>
    <body>
    <div ng-app class="container">
      <div ng-controller="CountryController">
        <div class="form-group">
          <label class="control-label" for="Country">Country:</label>
          <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
            <option value=''>Select</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label" for="States">States:</label>
          <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
            <option value=''>Select</option>
          </select>
        </div>
        <div class="form-group">
          <label class="control-label" for="City">City:</label>
          <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
            <option value=''>Select</option>
          </select>
        </div>
      </div>
    </div>

我想将 javascript 代码放入 >MyProject>js 目录中，并将 javascript 复制粘贴到名为 script.js 的文件中，并将以下行包含到查看/includes/header.php

script type="text/javascript" language="javascript" src="<?php echo base_url();?>js/script.js"></script>

在我的 Controller >form.php 中，我有一行用于加载 header.php

$this->load->view('includes/header',$datah);

当我将脚本与 view>form.php 分开时，我只得到下拉列表，它是我拥有的 html 标签的结果，但在任何列表中都看不到内容或国家或城市列表。下拉式菜单。请有人帮助我找出我的尝试出了什么问题。

最佳答案

我会放弃 Angular。我会在 CI Controller 中构建数组，然后将其传递给 View 。然后 View 将使用 jquery 在单独的 JS 文件中完成工作:

Controller :

function method() {
    $data['countries'] = array(
        'India' => array(
            'Andhra Pradesh' => array('Vijayawada', 'Guntur', 'Nellore', 'Kadapa'),
            'Madhya Pradesh' => array('Hyderabad', 'Warangal', 'Karimnagar'),
        ),
        'USA' => array(
            'San Francisco' => array('SOMA', 'Richmond', 'Sunset'),
            'Los Angeles' => array('Burbank', 'Hollywood'),
        ),
        'Australia' => array(
            'New South Wales' => array('Sydney', 'Orange', 'Broken Hill'),
            'Victoria' => array('Benalla', 'Melbourne'),
        )
    );

    $this->load->view('page', $data);
}

查看:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="<?= base_url();?>js/script.js"></script>
    </head>
    <body>
        <div>
            <div class="form-group">
                <label class="control-label" for="Country">Country:</label>
                <select class="form-control input-lg" id="country">
                    <option value=''>Select</option>
                    <?php foreach ($countries as $country => $states) { ?>
                        <option data-states='<?= json_encode($states); ?>'><?= $country ?></option>
                    <?php } ?>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="States">States:</label>
                <select class="form-control input-lg" id="state">
                    <option value=''>Select</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="City">City:</label>
                <select class="form-control input-lg" id="city">
                    <option value=''>Select</option>
                </select>
            </div>
        </div>
    </body>
</html>

JS:

$(document).ready(function() {
    $("#country").change(function() {
        $("#state, #city").html("<option value=''>Select</option>");
        var states = $('option:selected', this).data('states');
        $.each(states, function(k, v) {
            $("#state").append("<option data-cities='" + JSON.stringify(v) + "'>" + k + "</option>");
        });
        $("#state").change(function() {
            var cities = $('option:selected', this).data('cities');
            $.each(cities, function(k, v) {
                $("#city").append("<option>" + v + "</option>");
            });
        });
    });
 });

关于javascript - javascript 文件应该放在 codeigniter 目录中的什么位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29376167/

25 4 0
文章推荐： javascript - session 关闭后 Cookie 未被删除
文章推荐： apache - 如何强制浏览器刷新网页的缓存版本
文章推荐： powershell - Cmdlet.EndProcessing和Cmdlet.StopProcessing之间的区别
文章推荐： javascript - $cordova FileTransfer 下载非 JPEG 文件失败