显示和根据选择值隐藏内容 [英] Show & hide content based on select value

问题描述

我有这个HTML代码

<select class="selectOption">
    <option>Analytics</option>
    <option>Translation</option>
    <option>Poll</option>
</select>

<div id="changingArea">
    <div id="Analytics" class="desc">Analytics</div>
    <div id="Translation" class="desc">Translation</div>
    <div id="Poll" class="desc">Poll</div>
</div>​

Css

.desc {display: none;}​

Js

$(function(){
      $('.selectOtion').change(function(){
        var selected = $(this).find(':selected').text();
        $(".desc").hide();
         $('#' + selected).show();
      });
});

现在的问题是所有div元素都隐藏在页面加载中. 我想默认显示第一个选项的值，更改后div的内容也会更改.

The problem now it that all the div elements are hidden in page load. I want to show the first option value by default and when changed the div content is also change.

示例 http://jsfiddle.net/bsqVm/

谢谢你们的帮助

首先我的代码中有一个错字，所以'selectOtion'应该是'selectOption'

First there was a typo in my code, so 'selectOtion' should be 'selectOption'

第二次进行默认选择以显示我们可以触发DOMReady上的change事件作为未定义"解决方案

Second to make the default select to show we can trigger the change event on DOMReady as 'undefined' solution

所以javascript是

so the javascript is

$(function(){
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        //alert(selected);
        $(".desc").hide();
         $('#' + selected).show();
      }).change()
 });

或

 $(function(){
  $('#Analytics').show(); // Will show the div
  $('.selectOption').change(function(){
    var selected = $(this).find(':selected').text();
    //alert(selected);
    $(".desc").hide();
    $('#' + selected).show();
  });
 });

推荐答案

您的代码中有一个错字selectOtion应该为selectOption.要根据选定的值显示div，您可以在DOMReady上触发change事件.

There is a typo in your code selectOtion should be selectOption. For showing the the div according to selected value you can trigger the change event on DOMReady.

$(function(){
     $('.selectOption').change(function(){
         var selected = $(this).find(':selected').text();
         $(".desc").hide();
         $('#' + selected).show();
     }).change()
});

http://jsfiddle.net/XCUDF/

这篇关于显示和根据选择值隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！