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

对不起，如果这个问题是重复的，我已经阅读了大多数类似的问题，但它并没有解决我的问题。我有这个代码依赖下拉列表使用角js，我试图在我的codeigniter项目中实现。当我将这些代码直接放到我的视图form.php中时，我得到了预期的结果。在codeigniter目录中放置javascript文件的位置？

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并包括以下行视图/包含/报头。 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标签的结果，但没有任何内容或列表中的任何国家或城市可见下拉式菜单。请有人帮我找出我的尝试出了什么问题。

来源

2015-03-31 karma

如实地我已经尝试过在一起使用Angular和PHP框架，我发现它毫无意义。这实际上让我反对Angular。有没有理由需要角度？你可以轻松地用jQuery单独完成所有这些。 – CodeGodie 2015-03-31 18:58:03

@CodeGodie没有任何理由，我只是找到了这个代码，并试图在我的项目中使用它。如你所建议的，我会去找jQuery。但是这个功能正是我所期待的！ – karma 2015-03-31 19:01:31

通常，角度js代码在标记之前的html文件末尾。这样，所有的html都在角度启动前加载。尝试将您的脚本标签移动到您的脚注文件。 – Cerad 2015-03-31 19:13:50

我会去掉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>"); 
      }); 
     }); 
    }); 
});

来源

2015-03-31 19:39:23 CodeGodie

谢谢@CodeGodie，我有大约20个国家创建20个数组或者使用数据库代替 – karma 2015-03-31 19:48:04

使用数据库会更好，那么您将使用模型来检索该信息，然后将其传递到控制器，然后以你的看法。 – CodeGodie 2015-03-31 19:51:30

实际上，如果你要使用数据库，你最好的选择就是使用AJAX。您需要为具有唯一ID的国家/地区创建一个表格，并为具有唯一ID的国家/地区创建表格，并为相应国家/地区创建一个外国ID。然后在AJAX中，您需要在变更时致电每个州/城市。如果您需要帮助，请告诉我，我可以远程帮助您。 – CodeGodie 2015-03-31 19:58:02

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

回答

相关问题