需求：如图所示，根据不同选择呈现不同单价。

代码：html部分 

     
            
      
单价：0元/箱
            
      
                
       
容量：
                
       1000ml                
       1500ml                    
      
            
      
                
       
颜色：
                
       黑色                
       白色                
       透明色                    
      
            
      
                
       
印刷：
                
       单色印刷                
       双色印刷                
       多色印刷            
      
        
     

代码：css 部分（手机端部分样式）

 

.box{
   width: 96%;height: 33rem;border: 0.1rem solid gray;margin:0 auto;font-size:1.6rem;}.rongliang,.color,.yinshua{
   height: 8rem;width: 86%;margin: 0.6rem auto;border: 0.1rem solid gray;padding-left: 1rem;;}.box p{
   color:rgb(241,104,76)}.box h3{
   margin-left:1rem;}.small,.big,.black,.white,.opacity,.dan,.shuang,.duo{
   display:block;width: 7rem;float:left;height:2.5rem;line-height:2.5rem;margin-right:0.8rem;text-align: center;border: 0.1rem solid darkgray;}.clear{
   clear: both;}

代码：js部分

主要思路：创建一个对象，点击的时候给它添加属性，分别是rongliang,color,cyinshua，选择不同添加的属性值也不同。每次点击完成后判断这三个属性是否全部存在，当三个属性都存在的时候说明三个值都已经选好了，此时就可以给出单价了。然后写一个函数，根据该对象属性值不同，匹配不同的单价，并显示到页面相应位置。

 个人理解，欢迎大家提供不同思路。