刪除隱藏表格佔用的空間

我試圖顯示一個文本字段，從組合框選項中選擇不同的值。刪除隱藏表格佔用的空間

HTML文件

<select id="topic_type" onchange="func_type()"> 
    <option id="d"> D</option> 
    <option id="o">O</option> 
</select> 

<script type="text/javascript"> 
function func_type() 
{ 
    var elem = document.getElementById("topic_type"); 

    if(elem.value == "D") 
    { 
     document.getElementById("form_d").style.visibility = "visible"; 
     document.getElementById("form_o").style.visibility = "hidden"; 
    } 
    else if(elem.value == "O") 
    { 
     document.getElementById("form_o").style.visibility = "visible"; 
     document.getElementById("form_d").style.visibility = "hidden"; 
    } 
} 
</script>

這個代碼是工作的罰款。但我的問題是，表格只是隱藏的，所以它需要空間即。當我選擇其他選項的文本字段出現，但有一個空間，由於隱藏形式有沒有通過，我可以刪除空間

來源

2013-06-19 George

儘量減少你的代碼大小和不要複製相同的行兩次，因爲大小真的客戶端事項 – bugwheels94

嘗試使用display代替visibility這樣的任何選項：

if(elem.value == "D") { 
    document.getElementById("form_d").style.display = 'block'; 
    document.getElementById("form_o").style.display = 'none'; 
} else if(elem.value == "O") { 
    document.getElementById("form_o").style.display = 'block'; 
    document.getElementById("form_d").style.display = 'none'; 
}

或者使用jQuery，如果你有興趣，你可以使用.show()和.hide()：

if(elem.value == "D") { 
    $("#form_d").show(); 
    $("#form_o").hide(); 
} else if(elem.value == "O") { 
    $("#form_o").show(); 
    $("#form_d").hide(); 
}

來源

2013-06-19 19:14:56 SeanWM

如果你只有2個選項元素來處理並計劃永不擴大，然後確定。但是，如果由於某種原因你打算擴大你的選擇，只是想保持你的代碼短，乾淨，你可以跟蹤的$（本）的選定值...

jQuery的：

function package() { 
    $('#topic_type').on("change",function() { 
     mthissel = $(this).find("option:selected"); 
     mthissel.css({display:'block'}); //or 'none' 
     $(this).find('option:not(:selected)').css({display:'none'}); //or 'block' dependent on your preference :) 
    }); 
} 

$(function() { 
    package(); 
});

的HTML：

<select id="topic_type"> 
    <option id="d">D</option> 
    <option id="o">O</option> 
    <!--go ahead and add more <option values here--> 
</select>

而且我fiddle顯示它在行動

來源

2013-06-19 19:51:39 blackhawk

刪除隱藏表格佔用的空間

回答

相關問題