2

私はこの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();
  });
 });
4

5 に答える 5

4

コードにタイプミスがありselectOtionますselectOption。選択した値に従ってdivを表示するために、DOMReadyで変更イベントをトリガーできます。

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

http://jsfiddle.net/XCUDF/

于 2012-10-17T10:45:30.223 に答える
4

コードにタイプミスがあります

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

$('.selectOtion')に変更$('.selectOption')

私はあなたのフィドルを更新しました。

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

于 2012-10-17T10:46:19.890 に答える
3

これを試してください：jsfiddle

自動呼び出しイベントは、多くの場合、最も簡単な方法です...

于 2012-10-17T10:47:44.637 に答える
1

次の行を追加して、ロード時にそのdivを表示できます。

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

これがデモです

于 2012-10-17T10:51:01.467 に答える
1

常に正しい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
      });
});
于 2012-10-17T13:22:09.633 に答える