linking textbox with dropdown menu

Question

I am writing a program which consist of a drop down menu and it consist of few default values as below:

<%= f.select :securtiy_question, options_for_select([["Select a question.."],
          ["What is your previous cell number?"], ["What is your fathers name?"], ["write your question"]]),{}, :onchange => 'CheckOther(this);' %>

the HTML output of this is:

<select id="user_securtiy_question" name="user[securtiy_question]" onchange="CheckOther(this);"><option value="Select a question..">Select a question..</option><option value="What is your prevoius cell number?">What is your prevoius cell number?</option><option value="What is your fathers name?">What is your fathers name?</option><option value="write your question">write your question</option></select>

I wanted to display a textbox when I click "write your question" in drop down menu. For that purpose I have made an empty textbox with display as none.

<%= f.text_field :own_ques, :style => "display: none;"%>

Now I make a JAvascript in my view itself:

<script type="text/javascript">
  CheckOther = (user_securtiy_question) -> if user_securtiy_question.selectedIndex is user_securtiy_question.options_for_select.length - 1 document.getElementById("user_own_ques").style.display = "inline" else document.getElementById("user_own_ques").style.display = "none" document.getElementById("user_own_ques").value = "" return </script>

But still I am not able to see the textbox appearing someone please come up with a solution...

Answer 1

You can use a simple jquery in the page.

$("#user_securtiy_question").change(function(){
  $("#user_own_ques").val('');
  if(this.val()== "write your question"){
    $("#user_own_ques").show();
  }else{
    $("#user_own_ques").hide();
  }
});