在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文件的位置？

回答

相關問題