Change the values of radio buttons depending on dropdown selection

Question

Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.

First the select statement:

<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
    <option value="" selected></option>
    <option value="1">Read Only</option>
    <option value="2">HR Staff</option>
    <option value="3">Select 3</option>
    <option value="4">Select 4</option>
    <option value="7">Select 5</option>
</select>

I created a function that I thought would allow me to set the value, depenting on what is selected.

<script>
    function setDefault() {
    if (department.val() == '1'){
        alert('One');
    }
    $("#radio-0").prop("checked", true);
</script>

I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*

I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.

Thanks

Answer 1

Use jQuery onchange function.

 $(document).ready(function () { $("#department").change(function () { if(this.value=='1') { alert("one"); } $("#radio-0").prop("checked", true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <select id="department" name="department" class="input-xlarge"> <option value="" selected></option> <option value="1">Read Only</option> <option value="2">HR Staff</option> <option value="3">Select 3</option> <option value="4">Select 4</option> <option value="7">Select 5</option> </select> <input type="radio" id="radio-0"> 

Answer 2

Try

$('#department').on('change',function() {

    if ($(this).val() == '1') alert($(this).val())

})

http://jsfiddle.net/5x0h5g73/1/

Answer 3

I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.

The HTML based from yours and including some radio buttons

<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
                  <option value="" selected></option>

                    <option value="1">Read Only</option>

                    <option value="2">HR Staff</option>

                    <option value="3">Select 3</option>

                    <option value="4">Select 4</option>

                    <option value="7">Select 5</option>

</select><br />

<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />

Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.

function setDefault(input) {
    document.getElementById("radio-" + input.value).checked = true;
}

JsFiddle Example: http://jsfiddle.net/bpmf3cks/