在codeigniter目录中放置javascript文件的位置

Where to place the javascript file in codeigniter directory?

本文关键字：javascript 文件 位置 codeigniter      更新时间：2023-09-26

很抱歉，如果这个问题是重复的，我已经读过大多数类似的问题，但它没有解决我的问题。我使用angular js为依赖下拉列表编写了这段代码，我正试图在我的codeigniter项目中实现这段代码。当我把这些代码直接放在我的视图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的文件中，并包含以下行查看/included/header.php

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

在我的控制器>form.php中，我有一行加载header.php

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

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

我会取消Angular。我会在CI控制器中构建阵列，然后将其传递给视图。然后视图将使用jquery在一个单独的JS文件中完成工作：

控制器：

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>");
            });
        });
    });
 });
相关文章：