0

昨日、同じ種類の質問を別の形式で提起しました。しかし、今日私は別の形式で同じ質問が欲しいです。

ここに行きます：

1つのページに複数のdivがあります。

ドロップダウンから1つの値を選択し、送信ボタンをクリックすると、2つのdivを表示する必要があります。

これが私のhtmlコードです：

 <div id="one">
                  <h1>
                    Security
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>
             </div>
             <div id="two"  class="hidden">
                  <h1>
                    Customer Type
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>
             </div>


<form onSubmit="javascript: return false;">
                                    <select name='dropDown' id='dropDown' style="width:205px;padding:4px;margin-left:-2px;">
                                        <option value="one">Security</option>
                                        <option value="two">Customer Type</option>
</select>

これが[詳細を取得]ボタンです 

 <div id="one" class="roundedCorner">
                        <table width="100%" border="0" cellpadding="8" cellspacing="0">
                            <tr>
                            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">
                               Id_User
                               <br />
                               <input type="text" name="Member" class="ipttxt" tabindex="1" />
                            </td>
</tr>
</table>
</div>
 <div id="two" class="roundedCorner">
                        <table width="100%" border="0" cellpadding="8" cellspacing="0">
                            <tr>
                            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">
                               Id_User
                               <br />
                               <input type="text" name="Member" class="ipttxt" tabindex="1" />
                            </td>
</tr>
</table>
</div>

これが私のjsコードです

 <script type="text/javascript">
    $(document).ready(function(){
        $("#goBttn").click(function(){
            $("#"+$("#dropDown").val()).show();
            select = document.getElementById("dropDown").getElementsByTagName("option");
            select = document.getElementById("hdrlbl").getElementsByTagName("option");
            for(x=0;x<=select.length;x++)
                if($(select[x]).val()!=$("#dropDown").val()) $("#"+$(select[x]).val()).hide();
                if($(select[x]).val()!=$("#hdrlbl").val()) $("#"+$(select[x]).val()).hide();
        });
    });
</script>

ドロップダウンでセキュリティを選択した場合、顧客タイプの見出しdivとコンテンツdivを同じように表示する必要があります

コードのフォーマットについて教えてください。

私を助けてください。

よろしくお願いしますSKM

4

2 に答える 2

2

jsFiddleリンクhttp://jsfiddle.net/dqVy2/10/

HTML：

<div id="one" class="one hidden">
     <h1>Security
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>

</div>
<div id="two" class="two hidden">
     <h1> Customer Type
                      <div class="hdrhr" style="width:5%">&nbsp;</div>
                  </h1>

</div>
<form onSubmit="javascript: return false;">
    <select name='dropDown' id='dropDown' style="width:205px;padding:4px;margin-left:-2px;">
        <option value="one">Security</option>
        <option value="two">Customer Type</option>
    </select>
    <button id="goBttn">GO</button>
</form>
<div id="one" class="one roundedCorner hidden">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
        <tr>
            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">Id_User
                <br />
                <input type="text" name="Member" class="ipttxt" tabindex="1" />
            </td>
        </tr>
    </table>
</div>
<div id="two" class="two roundedCorner hidden">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
        <tr>
            <td align="center" class="parentalhdtlnt" style="color:#ffffff;width:5%">Id_User
                <br />
                <input type="text" name="Member" class="ipttxt" tabindex="1" />
            </td>
        </tr>
    </table>
</div>

jQuery：

$(function () {
    $("#goBttn").click(function () {
        $("#dropDown").find("option").each(function () {
            var div_id = $(this).val();
            $("." + div_id).each(function () {
                $(this).hide();
            });
        });
        $("." + $("#dropDown").val()).each(function () {
            $(this).show();
        });
    });
});
于 2013-01-25T20:54:18.483 に答える
0

コードが少し整理されていないように見えるので、コード全体を再構築するのに少し時間を費やしました。これがJSFiddleです：http：//jsfiddle.net/ccw24/

HTML

<div class="headerCont switchArea">
    <div data-ref="one">Header One (Security)</div>
    <div data-ref="two">Header Two (Customer Type)</div>
</div>

<select name='dropDown' id='dropDown'>
    <option value="one">Security</option>
    <option value="two">Customer Type</option>
</select>
<a href='#' id="pageChange">Go</a>

<div class="footerCont switchArea">
    <div data-ref="one">Footer One (Security)</div>
    <div data-ref="two">Footer Two (Customer Type)</div>    
</div>

JS

$(document).ready(function(){
    $("#pageChange").on('click',function(e){
        e.preventDefault();
        var ref = $('#dropDown').val();
        $('.switchArea > div').hide();
        $('div[data-ref="'+ref+'"]').show();
    });
});

CSS

.switchArea > div {
    display: none
}

.switchArea > div:first-of-type {
    display: block
}

注：このコードは、古いブラウザー（古いIE、私はあなたを見ています）ではうまく機能しない可能性のあるいくつかの最新の手法を使用しているため、これらのブラウザーとの互換性が必要な場合は、微調整が必​​要になる場合があります。

于 2013-01-25T21:10:03.407 に答える