I would like to use a radio choice field to determine the values that will be populated in a dropdown choice field on a sharepoint list form.

for example;

  • Food Type (radio field)
  • Options

    1. Meat
    2. Vegetable

If "Meat" is selected it will populate the dropdown field with meat options.

otherwise if "Vegetable" is selected it will be populated with vegetable options.

Can this be done with jquery and javascript, if so can you provide links to examples and documentation?

2 Answers 2


The solution I would use instead of populating the options based on the selection would be to create two different fields in a list (meat options and vegetable options).

With that you could throw in a simple script on a custom form to show the meat options when the meat radio button is selected and same thing for vegetables.

This way all of your options are still controlled by your list rather than having to do a workaround and populate it through jQuery.


If you have a radio field with 'Meat' and 'Vegetable' as options as well as two separate choice fields of meat types and vegetable types you can use this script to hide the types by default and show them when the radio button is selected.

$(document).ready(function() {
    $("input[value='Meat']").attr("onchange","showFood()"); //Setting function to run on change
    $("input[value='Vegetable']").attr("onchange","showFood()"); //Setting function to run on change

    $("#part1 > table > tbody > tr:nth-child(3)").hide(); //Hiding meat row in form (number will vary)
    $("#part1 > table > tbody > tr:nth-child(4)").hide(); //Hiding vegetable row in form (number will vary)

function showFood() {
    if($("input[value='Meat']").prop("checked") == true) { //Checking if 'Meat' is selected
        $("#part1 > table > tbody > tr:nth-child(3)").show(); //Showing meat selections
        $("#part1 > table > tbody > tr:nth-child(4)").hide(); //Hiding vegetable selections
    else if($("input[value='Vegetable']").prop("checked") == true) { //Checking if 'Vegetable' is selected
        $("#part1 > table > tbody > tr:nth-child(3)").hide(); //Hiding meat selections
        $("#part1 > table > tbody > tr:nth-child(4)").show(); //Showing vegetable selections


Here is a link to another answer on here that goes through SPServices.SPCascadeDropdowns. How to make a choice in a dropdown box render what appears in another dropdown box?.

That question is looking to do a little more with multiple dropdowns but this should get you going in the right direction if you want to use that.

  • I'm trying to avoid using multiple Dropdown fields. If I ended up going that route I would have to create 8 different dropdowns. I was hoping it would be possible to add choice directly to the dropdown field with jquery and javascript whenever I have a certain option selected. With using one dropdown it will allow to maintain better organized list.
    – zingwing
    Apr 15, 2015 at 13:32
  • If that's the case I would look at using two lookup fields instead then and use SPServices.SPCascadeDropdowns. This way you can maintain all of that information in two separate lists, and get that filtering you want using lookup fields.
    – Jordan
    Apr 15, 2015 at 13:35
  • I think what I'm going to end up doing is just making a dropdown menu with jquery and javascript and then save the value to a single line of text field on the list.
    – zingwing
    Apr 16, 2015 at 20:08

Instead of using radio buttons, you may be able to create a custom list which contains an "options" column as a single line of text and has the two options (Meat and Vegetable) within that list by adding them as items.

Then, in the list form, you can have the form pull the "options" column from the custom list you just created through managed metadata.

This means that each time the form is created the user can select the food option (meat, vegetable) as a dropdown (since the options are being pulled from the custom list)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.