选择的组合框不适用于小型设备

时间:2017-01-17 14:35:21

标签: jquery css mysql ajax codeigniter

我有2个组合框和文本框用于搜索(使用选择的jquery库)在第一个组合框中有类别,选择哪个类别然后其产品列表加载到第二个组合框中。如果产品在第二个组合框上选择,那么数据将使用ajax显示在div中。

一切都运行得很完美,但问题是,当我调整浏览器大小以检查负责人时,一些css不会调整为调整浏览器的大小,但如果我刷新然后调整完美。

这不是一个主要问题,但主要问题是我在inspect元素中选中了jQuery并且我发现通过选择的库为组合框动态生成的div,它不存在,它不起作用适用于小型设备。 div没有生成,所以在我的网页中有一个简单的选择框(组合框),但不建议(组合框和文本框)组合框。那么它的解决方案是什么?

当我在普通的桌面尺寸浏览器上运行时,存在带有<select>标签的div。当我在小型设备上运行时,它就不存在。只有<select>标记。

见这里:

enter image description here

我搜索了很多选项,但我找不到解决方案。告诉我简单的方法。

如果可以,请帮助我。

如果我的解释不准确那么抱歉,你可以问我这个问题,这样我就可以清楚地说明我想说的了。

注意: - 它在桌面大小上工作得很好,问题是小尺寸。我认为选择的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.
    }

在这样的数据库表中: -

enter image description here

0 个答案:

没有答案