单击单选按钮时如何激活下拉列表

Question

I have the following radio buttons and a dropdown in my rails form. One radio button is for 'yes' and another for 'no'

<input type="radio" value="true" name="staff[optquestion]">
<input type="radio" value="false" name="staff[optquestion]">

<select class="form-control" name="staff[Redesignation]"><option value=""> 
</option>

I want when a user clicks on 'yes' the dropdown below gets selected. Here is my javascript/jquery:

$(document).ready(function(){
    $("[name=staff[optquestion]]").change(function(){
        $("[name=staff[[Redesignation]]").toggle($(" 
[name=staff[optquestion]]").index(this)===1);
    });
});

I have placed the script in application.js but nothing happens. When I place the script in staffs.coffee I get the error "reserved word 'function'"

I know I could me mixing js and jquery here but am only starting out. Thanks for your help.

Answer 1

You must be careful while selecting elements by name in jQuery. For handling radio button inputs you should use here in your case :

$("input:radio[name='staff[optquestion]']")

And also remember to enclose the inputs in a form for better control. So,

<form>
    <input type="radio" value="true" name="staff[optquestion]" checked="checked">
    <input type="radio" value="false" name="staff[optquestion]">
    <select class="form-control" name="staff[Redesignation]">
        <option value=""> 
        </option>
    </select>
</form>

And the JS will be :

$(document).ready(function(){
    $("input:radio[name='staff[optquestion]']").change(function(){
        $("[name='staff[Redesignation]']").toggle();
        });
});

Since there are only two radio buttons here in use, this will work. Incase you have more than 2 you must check with values of the radio buttons using this in the event handler.