表單選擇選項，並響應相應的另一個表單選擇器

Question

現在我正在尋找解決方案，如何使下拉選擇表單，將有差異響應相應的選擇...
例如，我做了一個下拉選擇器的職業...

當我選擇信息技術時，它會顯示另一個選擇器，它只在用戶選擇信息技術時才顯示...該彈出選擇器允許我們選擇與網頁設計等相關的所有內容...

我可以知道如何用導軌做到這一點？

Answer 1

我會在這裏使用某種DHTML解決方案。你實際上並不依賴於Rails的解決方案。

假設您有兩類職業是「IT Stuff」和「Flower Arranging」。每個人都有一個子類別。

在您的視圖（xxx.erb.html）形式將是這個樣子：

<form> 

    <select name="profession" onChange="makeVisible(this.options[selectedIndex].value);"> 
    <option value="itstuff">IT Stuff</option> 
    <option value="flowerarranging">Flower Arranging</option> 
    </select> 
    <div id="itstuff" style="display:none" > 
    <!-- Here is where you put the <select> for the sub-categories of IT Stuff --> 
    <select name="itsub"> 
     <option value="WindowsAdmin">Windows</option> 
     <option value="NeXTStepAdmin">NeXT</option> 
    </select> 
    </div> 

    <div id="flowerarranging" style="display:none"> 
    <!-- Here is where you put the <select> for the sub-categories of IT Stuff --> 

    <select name="flowersub"> 
     <option value="roses">Roses</option> 
     <option value="daisies">Daisies</option> 
    </select> 
    </div> 
    <input type="submit" value="Submit Profession INfo" /> 
</form> 

<script> 
    function makeAllInvisible() { 
    document.getElementById('itstuff').style.display='none'; 
    document.getElementById('flowerarranging').style.display='none'; 
    } 
    function makeVisible(id) { 
    makeAllInvisible(); 
    document.getElementById(id).style.display='block'; 
    } 
</script> 

一旦你的，你的表單處理程序將需要能夠處理所有的輸入形式，包括隱形部分的形式。在Rails中，這意味着您將必須處理params [：profession]，params [：itsub]和params [：flowersub]，以獲取此表單的所有提交內容。

請小心使用Rails窗體幫助器。我還沒有在Rails form_for helpers中爲選擇標籤找到一個好的Rails表單標籤。我通常手工編碼。