如何隱藏表單並僅在選擇時顯示？

我想構建我的第一個程序。昨天我開始編碼，我不能停下來，但我在onchange函數中遇到了問題。我只想在我的選項列表上選擇Square時才顯示<form id="squareA">。另一個列表也一樣。我還沒有完成他們的形式，因爲我被卡在方塊A。如何隱藏表單並僅在選擇時顯示？

這是我的代碼。

<script> 
    function myShapes() { 
    var a1 = document.getElementById("shapes").value; 
    if(a1.value == option.value) { 
     document.getElementById("square").value = ("squareA"); 
    } else { 
     document.getElementById("square").disabled = true; 
    } 
    } 
} 
</script> 

<legend>Calculate Dimension</legend> 
<select id="shapes" onchange="myShapes"> 
    <option selected="selected" value="none">Select Shape</option> 
    <option onselect="mySquare" id="square" value="Square">Square</option> 
    <option onselect="myRect" id="rect" value="Rectangle">Rectangle</option> 
    <option onselect="myComb" id="comb" value="Combined">Combined</option> 
    <option onselect="myStrap" id="strap" value="Strap">Strap</option> 
    <option onselect="myTrap" id="trap" value="Trapezoidal">Trapezoidal</option> 
</select> 
<form id="squareA"> 
    <div disabled="disabled" id="disa"> 
    <input id="squareD" type="text" placeholder="Dimension"/> by 
    <input id="squareD2" type="text" placeholder="Dimension"/> 
    </div> 
</form> 
</fieldset>

在長行內部是沒有工作或錯誤的代碼。

來源

2016-03-17 Shon Wey Shilili

您需要在調用函數改變像'onchange =「myShapes（）」' –

你使用jQuery庫的頁面 –

沒有先生..它建議在標籤列表.. –

你需要調用的函數是在onchange屬性，然後在更改處理檢查值，並設置窗體的顯示值

function myShapes() { 
 
    /*On change check the value of the select and based on it set the display css value to either none or block*/ 
 
    document.getElementById('squareA').style.display = document.getElementById('shapes').value == 'Square' ? 'block' : 'none' 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<legend>Calculate Dimension</legend> 
 
<select id="shapes" onchange="myShapes()"> 
 
    <!--Need to call the function here, id add() at the end--> 
 
    <option selected="selected" value="none">Select Shape</option> 
 
    <option value="Square">Square</option> 
 
    <option value="Rectangle">Rectangle</option> 
 
    <option value="Combined">Combined</option> 
 
    <option value="Strap">Strap</option> 
 
    <option value="Trapezoidal">Trapezoidal</option> 
 
</select> 
 
<form id="squareA" style="display:none;"> 
 
    <!--Hide the form on page load--> 
 
    <div disabled="disabled" id="disa"> 
 
    <input id="squareD" type="text" placeholder="Dimension" />by 
 
    <input id="squareD2" type="text" placeholder="Dimension" /> 
 
    </div> 
 
</form>

來源

2016-03-17 04:01:46

https://jsfiddle.net/arunpjohny/0n81q7fj/ –

謝謝先生：D –

是的，我想先生..哪裏可以我標記它？ –

如何隱藏表單並僅在選擇時顯示？

回答

相關問題