2

私は質問に対する多くの答えを見つけました：

「その他」ドロップダウン値の選択で DIV を表示/非表示にするにはどうすればよいですか。

しかし、私はこれに対する答えを見つけることができません:ドロップダウン値の選択でdivを表示/非表示にするにはどうすればよいですか?

<select class="default" id="security_question_1" name="security_question_1">
        <option value="" selected>Select question...</option>
        <option value="1">Question One</option>
        <option value="2">Question Two</option>
        <option value="3">Question Three</option>
        <option value="4">Question Four</option>
        <option value="5">Question Five</option>
        <option value="6">Question Six</option> 
    </select>

上記のオプションのいずれかが選択されている場合、DIV を表示できるようにしたいと考えています。

ユーザーが 1、2、3、4、5、または 6 を選択すると、DIV が表示されます。ユーザーが選択を「質問を選択...」に戻すと、この DIV は再び非表示になります

JSfiddle ソリューションは完璧です

どうもありがとう！

4

10 に答える 10

8

これを試して：

HTML:

<div>
        <select>
            <option value="choose">Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

Javascript:

$(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").hide();
                    $(".red").show();
                }
                if($(this).attr("value")=="green"){
                    $(".box").hide();
                    $(".green").show();
                }
                if($(this).attr("value")=="blue"){
                    $(".box").hide();
                    $(".blue").show();
                }
                if($(this).attr("value")=="choose"){
                    $(".box").hide();
                    $(".choose").show();
                }
            });
        }).change();
    });

ワーキングデモ

あなたの条件に従って

于 2014-08-19T14:01:00.693 に答える
1

次の関数を onchange に追加します。

function showHide(value) {
    if (value=='')
        document.getElementById('divShow').style.display = 'none';
    else
        document.getElementById('divShow').style.display = 'block';
}

最初はdivの表示スタイル（非表示/表示に必要）をなしに設定します。ここでデモをチェック

于 2013-08-21T09:35:44.420 に答える
0

これを試して -

$( "#security_question_1" ).change(function () {
    if($( "option:selected", this ).text()=="text you want to match"){
       $("#div-id").hide();
    }else{
       $("#div-id").show();        
    }
});
于 2013-08-21T09:27:18.410 に答える
0 
<select class="default" id="security_question_1" name="security_question_1">
        <option value="" id="hide-div"selected>Select question...</option>
        <option value="1" id="show-div">Question One</option>
        <option value="2" id="show-div">Question Two</option>
        <option value="3" id="show-div">Question Three</option>
        <option value="4" id="show-div">Question Four</option>
        <option value="5" id="show-div">Question Five</option>
        <option value="6" id="show-div">Question Six</option> 
    </select>

$(document).ready(function(){
   $(".spl-div").hide();   
   $("option[id*='show-div']").bind('click', function(){
            $('.spl-div').show();
    });
    $("option[id*='hide-div']").bind('click',function(){
            $(".spl-div").hide();
    })
});
于 2013-08-21T09:29:31.763 に答える
0

なぜイベントを使わないのですか？次のように:

<select class="default" id="security_question_1" name="security_question_1" onchange="itemChange(this)">
        <option value="" selected>Select question...</option>
        <option value="1">Question One</option>
        <option value="2">Question Two</option>
        <option value="3">Question Three</option>
        <option value="4">Question Four</option>
        <option value="5">Question Five</option>
        <option value="6">Question Six</option> 
</select>
<div id="content" style="visibility:hidden">selection result
</div>

function itemChange(sender) {
    var c = document.getElementById("content");
    if (sender.value > 0) {
        c.innerHTML = sender.value;
        c.style.visibility = "visible";
    } else {            
        c.innerHTML = "selection result";   
        c.style.visibility = "hidden";
    }
}
于 2013-08-21T10:19:11.097 に答える