下拉框+表单
下拉框+表单的结合使用
通过选择下拉框的一件商品或产品,对应的表单信息变成该选择商品的详细信息
<\select data-am-selected οnchange=‘btnChange(this[selectedIndex].value)’>
<\option value=“1”>1</option>
<\option value=“2”>2</option>
<\option value=“3”>3</option>
</select>
<\div class=“list1”>
<\section data-am-widget=“accordion” class=“am-accordion am-accordion-gapped” data-am-accordion=’{ }’>
<\dl class=“am-accordion-item am-active”>
<\dt class=“am-accordion-title”>
<\label class=“subtitle”>aaa
</dt>
<\dd class=“am-accordion-bd am-collapse am-in”>
<\div class=“am-accordion-content”>
<\div>1
<\div>2
</dd>
</dl>
</section>
</div>
<\div class=“list2”>
<\section data-am-widget=“accordion” class=“am-accordion am-accordion-gapped” data-am-accordion=’{ }’>
<\dl class=“am-accordion-item am-active”>
<\dt class=“am-accordion-title”>
<\label class=“subtitle”>bbb
</dt>
<\dd class=“am-accordion-bd am-collapse am-in”>
<\div class=“am-accordion-content”>
<\div>3
<\div>4
</dd>
</dl>
</section>
</div>
<\div class=“list3”>
<\section data-am-widget=“accordion” class=“am-accordion am-accordion-gapped” data-am-accordion=’{ }’>
<\dl class=“am-accordion-item am-active”>
<\dt class=“am-accordion-title”>
<\label class=“subtitle”>ccc
</dt>
<\dd class=“am-accordion-bd am-collapse am-in”>
<\div class=“am-accordion-content”>
<\div>5
<\div>6
</dd>
</dl>
</section>
</div>
js:
function btnChange(values){
switch(values){
case “1”:
$(".inputall-list1").css(“display”,“block”);
$(".inputall-list2").css(“display”,“none”);
$(".inputall-list3").css(“display”,“none”);
break;
case “2”:
$(".inputall-list1").css(“display”,“none”);
$(".inputall-list2").css(“display”,“block”);
$(".inputall-list3").css(“display”,“none”);
break;
case “3”:
$(".inputall-list1").css(“display”,“none”);
$(".inputall-list2").css(“display”,“none”);
$(".inputall-list3").css(“display”,“block”);
break;
default: break;
}
}
最后通过switch里面的case解决