[英]Chained drop downs not populating
我正在研究链式下拉列表以过滤数据。 我的第一个下拉列表填充良好,但是第二个下拉列表似乎无效。 我一直在尝试查找问题,但无济于事。 我正在使用JavaScript使链条正常工作。
模型
function get_sub_list(){
$this->db->select('sub_name');
$query = $this->db->get('subdivisions');
if ($query->num_rows() > 0)
{
return $query->result();
}else{
return 'No Infom Found';
}
}
function get_xings($subdivision){
$this->db->select('Street');
$this->db->where('RrSubDiv', $subdivision);
$query = $this->db->get('xings');
log_message('info', "Value of subdivision was $subdivision");
if ($query->num_rows() > 0)
{
return $query->result_array();
}else{
return 'No Subs Found';
}
}
视图
<?php
$subdivision = array('Choose a Sub');
foreach($all_subs as $sub){
$subdivision[$sub->sub_name] = $sub->sub_name;
}
echo form_label('Subdivision: ', 'subs');
echo form_dropdown('subs', $subdivision, '', 'id="subdrop"');
echo form_label('Xing: ', 'xings');
echo form_dropdown('xing', array('Choose a State First'), '', 'id="xingdrop"');
echo br(3);
echo form_submit('zipsubmit', 'Get Data');
?>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>js/dropdown.js"></script>
控制者
public function multi_drop(){
$this->load->model('Xings_model','',TRUE);
$data['all_subs'] = $this->Xings_model->get_sub_list();
$this->load->view('atis/create_xing', $data);
}
public function ajaxdrop(){
if($this->_is_ajax()){
$this->load->model('Xings_model','', TRUE);
$subdivision = $this->input->get('subdivision', TRUE);
$data['sub_xings'] = $this->Xings_model->get_xings($subdivision);
//$this->load->library("security");
//$data = $this->security->xss_clean($data);
echo json_encode($data);
}else{
echo "Apperently is_ajax returned false!";
show_error('This method can only be accessed internally.', 404);
}
}
public function handle_submission(){
$this->load->view('multi_response');
}
function _is_ajax(){
return
(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}
Java脚本
(function() {
var httpRequest;
dropper =document.getElementById("subdrop");
dropper.onchange = function() {
makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
};
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
if (!httpRequest) {
altert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.setRequestHeader('X-Requested-With','XMLHttpRequest');
httpRequest.send();
}
function alertContents(){
if (httpRequest.readyState === 4) {
if (httpRequest.Status === 200){
var data = JSON.parse(httpRequest.response);
var select = document.getElementById('xingdrop');
if(emptySelect(select)){
for (var i = 0; i < data.sub_xings.length; i++){
var el = document.createElement("option");
el.textContent = data.sub_xings[i].Street;
el.value = data.sub_xings[i].Street;
select.appendChild(el);
}
}
}else{
alert('There was a problem with the request.');
}
}
}
function emptySelect(select_object){
while(select_object.options.length > 0){
select_object.remove(0);
}
return 1;
}
})();
在以下.Status
将.Status
更改为.status
:
if (httpRequest.Status === 200){
检查此参考: https : //developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/status
更新:我发现代码中的花括号存在问题。
此版本应能正常工作。
(function() {
var httpRequest;
dropper = document.getElementById("subdrop");
dropper.onchange = function() {
makeRequest('localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value);
};
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
if (!httpRequest) {
altert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
httpRequest.send();
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.response);
var select = document.getElementById('xingdrop');
if (emptySelect(select)) {
for (var i = 0; i < data.sub_xings.length; i++) {
var el = document.createElement("option");
el.textContent = data.sub_xings[i].Street;
el.value = data.sub_xings[i].Street;
select.appendChild(el);
}
}
} else {
alert('There was a problem with the request.');
}
}
}
function emptySelect(select_object) {
while (select_object.options.length > 0) {
select_object.remove(0);
}
return 1;
}
})();
更新2:使用自定义帮助程序XMLHttpRequest函数。
(function ()
{
var httpRequest;
var dropper = document.getElementById("subdrop");
dropper.onchange = function ()
{
makeRequest(
{
url: 'localhost/highball061516/atis/xing/ajaxdrop?subdivision=' + dropper.value,
type: 'GET',
callback: alertContents
});
};
function makeRequest(options)
{
httpRequest = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
options.contentType = "application/x-www-form-urlencoded";
httpRequest.open(options.type, options.url, options.async || true);
httpRequest.setRequestHeader("Content-Type", options.contentType);
httpRequest.setRequestHeader("X-Requested-With","XMLHttpRequest");
httpRequest.send((options.type == "POST") ? options.data : null);
httpRequest.onreadystatechange = options.callback;
return httpRequest;
}
function alertContents()
{
if (httpRequest.readyState === 4)
{
if (httpRequest.status === 200)
{
var data = JSON.parse(httpRequest.response);
console.log(data);
var select = document.getElementById('xingdrop');
if (emptySelect(select))
{
for (var i = 0; i < data.sub_xings.length; i++)
{
var el = document.createElement("option");
el.textContent = data.sub_xings[i].Street;
el.value = data.sub_xings[i].Street;
select.appendChild(el);
}
}
}
else
{
alert('There was a problem with the request.');
}
}
}
function emptySelect(select_object)
{
while (select_object.options.length > 0)
{
select_object.remove(0);
}
return 1;
}
})();
我没有第二次下拉菜单中收集数据的功能。 下面是正确的模型代码。 顶部具有添加的功能。
function get_xing_list(){
$this->db->select('street');
$query = $this->db->get('xings');
if ($query->num_rows() > 0)
{
return $query->result();
}else{
return 'No Xings Found';
}
}
function get_sub_list(){
$this->db->select('subdname');
$query = $this->db->get('subdivisions');
if ($query->num_rows() > 0)
{
return $query->result();
}else{
return 'No Subs Found';
}
}
function get_sub_xings($subdname){
$this->db->select('street');
$this->db->where('subdname', $subdname);
$query = $this->db->get('xings');
log_message('info', "Value of subdivision was $subdname");
if ($query->num_rows() > 0)
{
return $query->result_array();
}else{
return 'No Subs Found';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.