使用基於選項選擇的jquery隱藏元素

Question

我有兩個表單和一個選擇器。

這是我的代碼 -

<select>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>

<form id="pp">
<input type="text">
</form>

<form id="cc">
<input type="text">
</form>

現在，如果選擇了選項1，我想隱藏表單CC。 如果2隱藏形式PP。

我如何用js或jquery做到這一點？ 謝謝

Answer 1

試試這個（使用jQuery）：

$("select").bind("change", function() {
    if ($(this).val() == "1") {
        $("#pp").show();
        $("#cc").hide();
    }
    else if ($(this).val() == "2") {
        $("#pp").hide();
        $("#cc").show();
    }
});

此外，您可以在用戶選擇任何選項之前使用.hide()隱藏兩個表單，如上所示。

• bind將事件處理程序附加到選擇框的“更改”事件。 當用戶更改選擇的選項時會觸發此操作。
• 在處理程序內部， val用於確定當前所選選項的值。
• show()和hide()用於正確的表單，具體取決於選擇的選項。

工作示例： http ： //jsfiddle.net/andrewwhitaker/faqZg/

Answer 2

    <script>
    function Hide(val)
    {
    if(val==1)
{
    document.getElementById('cc').style.display='none';
    document.getElementById('pp').style.display='inline';
    }
    if(val==2)
{ 
   document.getElementById('pp').style.display='none';
    document.getElementById('cc').style.display='inline';
    }
} 
   </script>

    <select onchange="Hide(this.value);">
    <option value="">Please Select</option>
    <option value="1">Pay</option>
    <option value="2">Goog</option>
    </select>

    <div id="pp">
    <input type="text">
    </div>

    <div id="cc">
    <input type="text">
    </div>