4

ドロップダウン選択オプションボックスからdivを切り替える必要があります。jqueryのasmselectに似ていますが、オプションタグをリストする代わりに、非表示のdivを表示したいと思います。このようなものはありますか？または誰かがそれを設定する方法を知っていますか？ありがとう、ジェフ。

更新しました

基本的に私が欲しいのは、リストを生成する代わりにdivを切り替えても、上記のasmselectリンクの外観と相互作用です。以下のコード例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#theSelect").change(function(){          
        $("#theSelect option:selected").click(function(){
            var value = $(this).val();
            var theDiv = $(".is" + value);

            $(theDiv).toggle(function(){
                $(this).removeClass("hidden");
            }),function(){
                $(this).addClass("hidden");
            }
        }); 
    });

});

</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient</div>
    <div class="hidden isPhysician">Physician</div>
    <div class="hidden isNurse">Nurse</div>
</body>
</html>
4

3 に答える 3

6

このようなものをお探しでしたか？http://jsfiddle.net/tYvQ8/

$("#theSelect").change(function() {          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});​

選択オプションが変わると、

  • 選択divしたを表示し、そのクラスslideDown()を削除します。hidden
  • divクラス名に「is」が含まれている兄弟を検索します。（メニューが兄弟でない場合は簡単になります。）
  • 以前に表示された兄弟をで非表示にします。これは、完了後にクラスslideUp()を追加するためにコールバックを取りますhiddenslideUp()

別の（私の意見では、より良い）方法は次のとおりです：http： //jsfiddle.net/tYvQ8/1/

クラスを削除hiddenし、jQueryを使用してそれらを非表示にします。そうすれば、クラスの追加と削除について心配する必要はありません。

非表示のクラスのないHTML

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>​

jQuery

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});​
于 2010-05-14T12:12:51.200 に答える
2

リストオプションとdivタグは、同じ方法で識別および切り替えることができます。

$（'＃div_id'）。toggle（）;

したがって、参照したasmselectプラグインのように要素セレクターを使用してオプションタグを選択する代わりに、要素セレクターを変更してページ上のdivタグを選択するだけです。

于 2010-05-04T17:04:46.910 に答える
0

前述のように.change（）を使用しますが、jqueryの.show（）および/または.hide（）メソッドを使用します。

    if($(this).val() == 'selected_option') {
        $('.selector1').show(); //displays element with display:none;        
    } else {
        $('.selector1').hide(); //hides element again
    }
于 2017-06-17T10:45:38.680 に答える