2011-12-31 181 views
8

我瀏覽了所有關於此主題的問題和答案,但仍無法使我的方案正常工作。 我想在選擇下拉菜單選項時觸發點擊按鈕操作;看起來很簡單,應該在AJAX中很常見。在Ruby on Rails表單中選擇onChange

這裏是我的代碼的相關摘錄:

<%= form_for(@test, :html => {:id => "form_id", :name => "MyForm", :remote => "true"}) do |form| %> 
    <%= form.label "Menu1" %> 
    <%= form.select (:Menu1, [["Option1","value1"],["Option2","value2"]], :html_options=>{:onChange=>"javascript: this.form.apply_button_name.click();"}) %> 

    <!-- more select menus and text fields here --> 

    <div class="actions"> 
     <%= form.submit "Apply", :name => "apply_button_name", :remote => "true" %> 
    </div> 
<% end %> 

我使用。「:遠程=>‘真’既爲形式和按鈕,因爲這讓AJAX工作的唯一辦法,我也嘗試過有和沒有明確的「html_options」和「javascript:」,在我瀏覽了一些SO的答案後,提示但沒有幫助,我也試過onSelect和onClick而不是onChange,但仍然沒有運氣

生成HTML是以下內容:

Menu1 
    <select id="test_Menu1" name="test[Menu1]"><option value="value1">Option1</option> 
<option value="value2" selected="selected">Option2</option></select> 

正如您所見,HTML代碼中沒有onChange事件處理程序;爲什麼?任何人都看到我做錯了什麼?

感謝您的任何幫助。

回答

14

修改您的來電form.select,像這樣:

<%= form.select :Menu1, [["Option1","value1"],["Option2","value2"]], {}, 
       :onChange=>"javascript: this.form.apply_button_name.click();" %> 
+0

感謝rabusmar,這有助於使用平變化,但是當我選擇選項1,控制器獲取值2,反之亦然。我添加了第三個選項,看起來控制器沒有選擇我剛剛選擇的選項,而是之前的選項!它爲什麼這樣做?我通過向控制器添加了「@ test.Menu1 =」+ @ test.Menu1.to_s +「\ n」來檢查這一點。 – rh4games 2011-12-31 22:28:30

+0

這是因爲表單發送時未設置值。你可以在你的處理程序中使用'setTimeout',以便發送正確的值。 – rabusmar 2012-01-01 03:28:52

+0

我可以問,如何引用此文件外的JavaScript,而不是內聯JavaScript? – Orz 2015-07-24 03:45:31

3

如果您檢查文檔:

API Dock Ruby on Rails select

你會看到,選擇表單輔助採取以下形式:

select(object,method,choices,options = {},html_options = {})

如果你沒有通過任何選項散列(在你的情況下這將是一個空的散列),表單認爲你的html_options散列是你的選項散列,並且會感到困惑。

一種檢查方法是添加類似{:onchange =>「alert('Hello');」},並查看事件是否成功觸發,或者在您的實際網頁中右鍵單擊選擇元素並檢查它。如果html中沒有onchange選項,那意味着你的rails形式助手的確將html_options與其他選項混淆了。所以,你應該擁有的一切:

<%= form.select (:Menu1, [["Option1","value1"],["Option2","value2"]], {}, {:onChange=>"handler();"} %> 

確保包括爲options空哈希HTML選項之前,您應該罰款。我不認爲你甚至需要有html_options和JavaScript的東西。

最後,如果的onChange不工作,嘗試與沒有資本C.

+0

它不工作。 – Aravin 2017-09-22 07:31:58