Question

我有一个这个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内容也会改变。

实施例 http://jsfiddle.net/bsqVm/

修改

谢谢你们的帮助

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

第二个使默认选择显示我们可以在DOMReady上触发更改事件为'未定义'解决方案

所以javascript是

$(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();
  });
 });

Answer 1

您的代码中存在拼写错误selectOtion应为selectOption。要根据所选值显示div，您可以在DOMReady上触发更改事件。

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

http://jsfiddle.net/XCUDF/

Answer 2

您的代码中存在拼写错误

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

将$('.selectOtion')更改为$('.selectOption')

我已经更新了你的小提琴工作正常现在看看

http://jsfiddle.net/bsqVm/4/

Answer 3

试试这个：jsfiddle

自动通话事件通常是最简单的事情......

Answer 4

您可以添加此行以显示加载时的div：

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

这是DEMO

Answer 5

为了确保您始终显示正确的div，更好地为所有选项赋值，即使它与选项中的文本相同，因为如果您有多种语言，例如西班牙语中的“Analytics”将具有不同的文本。所以最好这样做：

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

$(function(){
      $('#Analytics').show(); // Will show the div
      $('.selectOption').change(function(){
        var selected = $(this).val(); //may store it in a variable
        //alert(selected);
        $(".desc").hide();
        //$('#'+selected).show();
        $('#' + $(this).val()).show(); //or u can just use obj value in selector to save coding
      });
});

展示＆amp;根据选择值隐藏内容

5 个答案: