Can you populate a dropdown choice field with jquery and javascript?

Question

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?

Answer 1

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.

EDIT:

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
    }   
}

EDIT 2:

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.

Answer 2

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)