分类默认选中商品,保留值,更改

本文介绍了一个基于CodeIgniter框架实现的商品分类管理系统的代码示例。该系统通过PHP实现,包括获取所有分类、根据ID搜索子分类并更新默认设置等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<?php

/**
*
*/
defined('BASEPATH') OR exit('No direct script access allowed');
class Monthsx extends CI_Controller
{
    
    function __construct()
    {
        parent::__construct();
    }


    public function index(){
        $res['date']=$this->db->get('month_type')->result_array();

        $this->load->view('month/index.html',$res);
    }


    public function sear(){
        $mid =$this->input->get('mid');
        $date=$this->db->get_where('type','mid='.$mid)->result_array();
        echo json_encode($date);

    }

    public function save_type(){
        $id =$this->input->get('str');
        $mid =$this->input->get('mid');
        
        //选中默认
        $sql='UPDATE type set ismr=1 where id in('.$id.')';
        //取消默认
        $sql2='UPDATE type set ismr=0 where id not in('.$id.') and mid='.$mid;

        $res1=$this->db->query($sql);
        $res2=$this->db->query($sql2);
        if($res1){
            echo '1';
        }else{
            echo '0';
        }
    }

}




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="<?php echo base_url();?>public/home/js/jquery1.js"></script>
</head>
<body>
    商品分类:
    <select name="type" class="sel">
    <option value="0">请选择</option>
        <?php foreach($date as $v): ?>
            <option value="<?=$v['mid']?>"><?=$v['m_name']?></option>
        <?php endforeach; ?>
    </select>
<div id="ser" style="display: none;"></div>
</body>
<script>
    $('.sel').change(function(){
        _this=$(this);
         mid=_this.val();
        var url='<?php echo site_url("&d=home&c=monthsx&m=sear");?>';
        if(mid!=0){
            $.get(url,{mid:mid},function(msg){
                var str='';
                $.each(msg,function(k,v){
                    if(v['ismr']==1){
                        str+='<input type="checkbox" name="ismr[]" value="'+v['id']+'" checked/>'+v['t_name']+'<br>';
                    }else{
                        str+='<input type="checkbox" name="ismr[]" value="'+v['id']+'"/>'+v['t_name']+'<br>';
                    }
                })
                $('#ser').html(str+'<button class="btn-sv">保存</button>');
                $('#ser').show(500)

            },'json');
        }
    });
    
    //保存
    $(document).on('click','.btn-sv',function(){
        var ch=$('input:checked').length;
        var str='';
        if(ch!=0){
            for(var i=0;i<ch;i++){
                str+=','+$('input:checked').eq(i).val();
            }
            str=str.substr(1)
        }

        var url='<?php echo site_url("&d=home&c=monthsx&m=save_type");?>';
        $.get(url,{str:str,mid:mid},function(msg){
            if(msg==1){
                alert('更改成功')
                $('#ser').hide(500)
            }else{
                alert('更改失败')
            }
        });

        
    });
</script>
</html>

<think>好的,用户想了解如何修改select选中option的默认样式。首先,我得回忆一下HTML和CSS的相关知识。默认情况下,浏览器对<select>和<option>元素的样式控制比较有限,尤其是下拉选项部分,不同浏览器的表现可能差异较大。用户可能希望自定义这些样式,比如改变颜色、字体、背景等,以提升网站的整体设计。 首先,我需要考虑使用纯CSS的方法。对于<select>元素本身,可以通过CSS修改其外观,比如边框、背景色、内边距等。但下拉选项的样式,尤其是<option>标签,传统CSS的支持并不完善。例如,虽然可以设置字体大小、颜色和背景色,但很多高级样式如阴影、定位等可能无法应用,且不同浏览器的支持程度不一。 接下来,可能需要提到使用JavaScript来增强或替换原生的下拉菜单。通过隐藏原生的<select>元素,然后使用自定义的HTML元素(如div、ul、li)来模拟下拉菜单,这样可以实现更灵活的样式控制。这种方法虽然有效,但会增加一定的开发复杂度,需要考虑交互事件如点击、键盘导航等,同时还要保持与原生表单元素的兼容性。 然后,可能需要提到一些现有的JavaScript库或框架,比如Select2、Chosen等,这些库已经处理了跨浏览器的兼容性问题,并提供了丰富的样式定制选项。推荐使用这些库可以节省开发时间,同时确保更好的用户体验。 另外,用户可能需要了解伪元素的应用,比如::-ms-expand和::-webkit-inner-spin-button,这些伪元素可以用来修改特定浏览器下的默认样式。例如,在IE和Edge中隐藏下拉箭头,或在Chrome和Safari中调整箭头样式。 还需要提到实验性属性,如appearance: none;,它可以移除默认的浏览器样式,允许开发者自定义。不过,需要注意兼容性问题,可能需要添加浏览器前缀。 最后,应该总结不同方法的优缺点,帮助用户根据项目需求选择最合适的方案。如果是简单的样式调整,纯CSS可能足够;如果需要高度定制化的下拉菜单,可能需要借助JavaScript库。同时,要提醒用户测试不同浏览器的兼容性,确保样式在各种环境下都能正常显示。</think>要修改select元素选中状态的默认样式,需分层次处理不同部分的样式控制。以下是关键步骤和注意事项: 一、基础CSS控制(兼容性较好) ```css /* select框本身的样式 */ select { padding: 8px; border: 2px solid #ccc; border-radius: 4px; background-color: white; font-size: 16px; } /* 下拉面板基础样式 */ select option { background-color: #f8f9fa; color: #333; padding: 8px 12px; } ``` 二、浏览器前缀处理(针对特定内核) ```css /* 隐藏IE/Edge的默认箭头 */ select::-ms-expand { display: none; } /* 移除Firefox的默认箭头 */ @-moz-document url-prefix() { select { -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; } } /* 移除Webkit默认样式 */ select { -webkit-appearance: none; appearance: none; } ``` 三、高级样式方案(需权衡兼容性) 1. 伪元素实现自定义箭头: ```css .select-wrapper { position: relative; display: inline-block; } .select-wrapper::after { content: "▼"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #666; } ``` 2. 使用数据属性实现动态样式: ```html <select data-style="custom"> <option>选项1</option> <option>选项2</option> </select> ``` ```css select[data-style="custom"] { /* 自定义样式 */ } ``` 四、JavaScript替代方案(推荐流程) 1. 使用第三方库(推荐): ```html <!-- 引入Select2 --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script> $(document).ready(function() { $('.custom-select').select2({ theme: "classic", minimumResultsForSearch: Infinity }); }); </script> ``` 2. 自定义实现要点: - 使用`display: none`隐藏原生select - 用div/ul/li构建可视元素 - 处理键盘事件(↑/↓/Enter) - 维护与原生表单的数值同步 五、浏览器兼容性对照表 | 属性/方法 | Chrome | Firefox | Safari | Edge | IE11 | |----------------|--------|---------|--------|-------|------| | option样式 | 部分 | 部分 | 部分 | 部分 | 不支持 | | appearance:none | 需前缀 | 需前缀 | 需前缀 | 需前缀| 不支持 | | 伪元素箭头 | 支持 | 支持 | 支持 | 支持 | 不支持 | 最佳实践建议: 1. 优先使用CSS方案进行基础优化 2. 复杂需求推荐使用Select2等成熟方案 3. 自定义实现时务必进行多浏览器测试 4. 移动端建议保留原生控件确保体验 调试技巧: ```css /* 强制显示下拉面板样式(开发时使用) */ select:focus { transform: scale(1); opacity: 1; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值