Question

很抱歉，如果这个问题重复一遍，我已经阅读了类似的大部分问题，但这并没有解决我的问题。我有使用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代码放入＆gt; MyProject＆gt; js目录并将javascript粘贴到名为script.js的文件中，并将以下行包含在视图/包括/ header.php文件

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

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

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

当我将脚本与视图＆gt; form.php分开时，我只得到下拉列表，这是我拥有的html标签的结果，但是没有任何内容或列表可以在任何下拉式菜单。请有人帮助我找到我的尝试出了什么问题。

Answer 1

我会废除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>"); }); }); }); });

将javascript文件放在codeigniter目录中的哪个位置？

1 个答案: