Question

昨天我以不同的格式提出了同样类型的问题。但今天我想以不同的格式提出相同的问题。

这就是：

我在一个页面中有多个div。

当我从下拉列表中选择一个值并单击提交按钮时，我需要显示两个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

Answer 1

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

Answer 2

我花了一些时间重新整理代码，因为它对我来说看起来有点无组织。这是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，我正在看着你），所以如果你需要与这些浏览器兼容，那么你可能需要做一些调整。 / p>

使用带有提交按钮的select选项标签元素显示两个div

2 个答案: