我有2个组合框和文本框用于搜索(使用选择的jquery库)在第一个组合框中有类别,选择哪个类别然后其产品列表加载到第二个组合框中。如果产品在第二个组合框上选择,那么数据将使用ajax显示在div中。
一切都运行得很完美,但问题是,当我调整浏览器大小以检查负责人时,一些css不会调整为调整浏览器的大小,但如果我刷新然后调整完美。
这不是一个主要问题,但主要问题是我在inspect元素中选中了jQuery并且我发现通过选择的库为组合框动态生成的div,它不存在,它不起作用适用于小型设备。 div没有生成,所以在我的网页中有一个简单的选择框(组合框),但不建议(组合框和文本框)组合框。那么它的解决方案是什么?
当我在普通的桌面尺寸浏览器上运行时,存在带有<select>
标签的div。当我在小型设备上运行时,它就不存在。只有<select>
标记。
见这里:
我搜索了很多选项,但我找不到解决方案。告诉我简单的方法。
如果可以,请帮助我。
如果我的解释不准确那么抱歉,你可以问我这个问题,这样我就可以清楚地说明我想说的了。
注意: - 它在桌面大小上工作得很好,问题是小尺寸。我认为选择的jQuery由于某种原因没有调用它的功能。
查看: -
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<link href="<?php echo base_url();?>css/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://alxlit.name/bootstrap-chosen/bootstrap.css" />
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<script>
$(function() {
$('.chosen-select').chosen();
$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
});
</script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-0" style="padding:0px;">
<div class="form-group">
<select id="category" class="chosen-select" onchange="set_cat(this.value)" title="Select Category">
<option value="" selected style="display:none;">Select Category</option>
<option value="all">All</option>
<?php
foreach($cat as $c)
{ echo "<option value='".$c['category']."'>".$c['category']."</option>"; }
?>
</select>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12" style="padding:0px;">
<div class="form-group" style="width:100%;">
<div id="product">
<select id="prod" class="chosen-select" onchange="set_prod(this.value)">
<option value=""></option>
<option disabled>Please select category first</option>
</select>
</div>
</div>
</div>
</div>
<script>
function set_cat(cat)
{
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
options.async = true;
});
$.ajax({
url:"<?php echo base_url('searching/set_cat/');?>",
async: false,
type: "POST",
data: {cat:cat},
dataType: "html",
success: function(data)
{
$("#product").html(data);
}
})
}
function searching(search_item)
{
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
options.async = true;
});
$.ajax({
url:"<?php echo base_url('searching/search_item/');?>",
async: false,
type: "POST",
data: {search_item:search_item},
dataType: "html",
success: function(data)
{
$("#container").html(data);
}
})
}
</script>
型号: -
function product()
{
$cat=$this->input->post('cat');
$query="select cat_name, GROUP_CONCAT(pro_name) pro_name, GROUP_CONCAT(bus_name) bus_name from tbl_business where category like '".$cat."' GROUP BY cat_name";
$r=$this->db->query($query);
return $r->result_array();
}
控制器: -
function set_area()
{
$this->load->model('searching');
$output=$this->searching->product();
foreach ($output as $value)
{
$newArr = explode(',',$value['product']);
foreach ($newArr as $val)
{
$productArray[] = array($value["category"]=>$val);
}
$newArr = explode(',',$value['seller']);
foreach ($newArr as $val)
{
$productArray2[]=$val;
}
}
if(isset($productArray))
$result['item'] = $productArray;
else{
$arr=array('product'=>'Not Found');
$result['item']=array($arr);
}
if(isset($productArray2))
$result['sell'] = $productArray2;
else{
$arr=array('seller'=>'Not Found');
$result['sell']=array($arr);
}
$result['output']=$output;
$this->load->view('combo_product',$result); // here i display data in another view that is works fine.
}
在这样的数据库表中: -