如何显示所选选项（Div）

本文介绍了如何显示所选选项（Div）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想按值或ID显示div。 虽然我不想使用选择下拉菜单。 请参阅工作小提琴

$（ function （）{ $（' ＃colorselector'）。change（ function （）{ $（' 。colors'）。hide（）; $（' ＃ ' + $（ this ）。val（））。show（）; }）; }）;

< div > < ul id = colorselector > < li 类 = init > [SELECT] < / li > < li value = red > 红色< / li > < li value = 黄色 > 黄色< / li > < li value = blue > 蓝色< / li > < / ul > < div id = red 类 = colors style = display：none > red ... < / div > < div id = 黄色 class = colors 样式 = display：none > 黄色.. < / div > < div id = blue class = colors style = display：none > blue .. < / div > < / div >

解决方案

（ function （）{

（' ＃colorselector'）。change（ function （）{

（' 。colors' ）隐藏（）;

I want to show div by value or id. Although i don't want to use select dropdown. Please see the working fiddle

$(function() { $('#colorselector').change(function(){ $('.colors').hide(); $('#' + $(this).val()).show(); }); });

<div> <ul id="colorselector"> <li class="init">[SELECT]</li> <li value="red">Red</li> <li value="yellow">Yellow</li> <li value="blue">Blue</li> </ul> <div id="red" class="colors" style="display:none"> red... </div> <div id="yellow" class="colors" style="display:none"> yellow.. </div> <div id="blue" class="colors" style="display:none"> blue.. </div> </div>

解决方案

(function() {

('#colorselector').change(function(){

('.colors').hide();