如何显示所选选项（Div） [英] How Do I Show Selected Option (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   = < span class =code-keyword> 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();

这篇关于如何显示所选选项（Div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！