时间戳

首页 > 解决方案 > 如何根据所选值在同一位置隐藏和显示下拉菜单？

javascript - 如何根据所选值在同一位置隐藏和显示下拉菜单？

问题描述

我列出了 4 个下拉列表，但我想一次只显示一个。它基于选定的值，但是当我尝试显示下拉列表时，它不会被另一个替换它只是在第一个下拉列表旁边可见。

我想在同一个地方有一个下拉位置，只有值应该改变。我怎样才能做到这一点。?

代码 ：

   		  		document.getElementById("one").style.visibility = "visible";
                    document.getElementById("two").style.visibility = "hidden";
                    document.getElementById("three").style.visibility = "hidden";
                    document.getElementById("four").style.visibility = "hidden";
    	            
    	            function checklistChange()
    	            {
    		           
    		           if (document.getElementById("productType").value==4068 && document.getElementById("C").checked)
    		           {			          
    			           document.getElementById("one").style.visibility = "hidden";
    			           document.getElementById("three").style.visibility = "hidden";
    					   document.getElementById("four").style.visibility = "hidden";
    			           document.getElementById("two").style.visibility = "visible";
    			          
    		           } 
    		           else if(document.getElementById("productType").value==4068 && document.getElementById("S").checked)
    		           {
    			           document.getElementById("one").style.visibility = "hidden";
    					   document.getElementById("two").style.visibility = "hidden";
    					   document.getElementById("four").style.visibility = "hidden";
    					   document.getElementById("three").style.visibility = "visible";
    		           }
    	            }
                   
	        
        <table>
            <tr>
                <td>
                    <p>Product Type : </p>
                </td>
                <td><select id="productType">
                        <option value=4068>Af only</option>
                        <option value=4069>Multi</option>
                    </select></td>
            </tr>
            <tr>
                <td>
                    <p>Plan Type : </p>
                </td>
                <td><input id="S" name="planType" type="radio" value='S' checked="true">StartUp
                    <input id="C" name="planType" type="radio" value='C'>Conversion
                </td>
            </tr>
        </table>
               <table>
    	          <tr><td><p>Checklist: </p></td>
    		          <td> 
                <select id="one" onclick="checklistChange()">
                    <option value=1>India</option>
                    <option value=2>America</option>
                    <option value=3>England</option>
                    <option value=4>SriLanka</option>
                    <option value=5>Bangladesh</option>
                </select>
    
                <select id="two">
                    <option value=5>Africa</option>
                    <option value=6>Nepal</option>
                    <option value=7>Wens</option>
                    <option value=8>Brazil</option>
                    <option value=9>Bhootan</option>
                </select>
    
                <select id="three">
                    <option value=10>Crotia</option>
                    <option value=11>Pune</option>
                    <option value=12>Chiplun</option>
                    <option value=13>Chakan</option>
                    <option value=14>Bangladesh</option>
                </select>
    
                <select id="four">
                    <option value=15>PimpeiChainhwad</option>
                    <option value=16>Pune</option>
                    <option value=17>Paud</option>
                    <option value=18>Mumbai</option>
                    <option value=19>Bangladesh</option>
                </select>
    		          </td></tr></table>

标签： javascriptjavajqueryhtmluser-interface

解决方案

使用 display: none 代替 visibility: hidden 和 display: block 代替 visibility: visible。可见性只会隐藏（而不是删除）元素。当用户实际选择他们想要的计划类型时，您还需要调用 checklistChange 以便您的显示更新。

我可以建议进行更多更改以使其更可用，但是如果不能 100% 确定您想要什么功能，就很难说。我还注意到文档的标题，所以我假设您对 JS 比较陌生。

<HTML>

<head> <title>JS PRACTICE</title></head>

<body>

    <table>
        <tr>
            <td>
                <p>Product Type : </p>
            </td>
            <td><select id="productType">
                    <option value=4068>Af only</option>
                    <option value=4069>Multi</option>
                </select></td>
        </tr>
        <tr>
            <td>
                <p>Plan Type : </p>
            </td>
            <td><input id="S" onclick="checklistChange()" name="planType" type="radio" value='S' checked="true">StartUp
                <input id="C" onclick="checklistChange()" name="planType" type="radio" value='C'>Conversion
            </td>
        </tr>
    </table>
           <table>
              <tr><td><p>Checklist: </p></td>
                  <td> 
            <select id="one" onchange="checklistChange()">
                <option value=1>India</option>
                <option value=2>America</option>
                <option value=3>England</option>
                <option value=4>SriLanka</option>
                <option value=5>Bangladesh</option>
            </select>

            <select id="two">
                <option value=5>Africa</option>
                <option value=6>Nepal</option>
                <option value=7>Wens</option>
                <option value=8>Brazil</option>
                <option value=9>Bhootan</option>
            </select>

            <select id="three">
                <option value=10>Crotia</option>
                <option value=11>Pune</option>
                <option value=12>Chiplun</option>
                <option value=13>Chakan</option>
                <option value=14>Bangladesh</option>
            </select>

            <select id="four">
                <option value=15>PimpeiChainhwad</option>
                <option value=16>Pune</option>
                <option value=17>Paud</option>
                <option value=18>Mumbai</option>
                <option value=19>Bangladesh</option>
            </select>
                  </td></tr></table>
            <script>
                document.getElementById("one").style.display = "block";
                document.getElementById("two").style.display = "none";
                document.getElementById("three").style.display = "none";
                document.getElementById("four").style.display = "none";

                function checklistChange()
                {

                   if (document.getElementById("productType").value=="4068" && document.getElementById("C").checked)
                   {                      
                       document.getElementById("one").style.display = "none";
                       document.getElementById("two").style.display = "block";
                       document.getElementById("three").style.display = "none";
                       document.getElementById("four").style.display = "none";

                   } 
                   else if(document.getElementById("productType").value=="4068" && document.getElementById("S").checked)
                   {
                       document.getElementById("one").style.display = "none";
                       document.getElementById("two").style.display = "none";
                       document.getElementById("four").style.display = "none";
                       document.getElementById("three").style.display = "block";
                   }
                }

            </script>

</body>

</HTML>

推荐阅读