Dynamic Dropdown, JQuery, Not Submitting form with Value

Question

I have the following code, which creates a dynamic dropdown (Text Color) based on the selection of another dropdown (Background Color)

It works as expected, and populates the Text Color dropdown perfectly.

However, when I submit my form, the value for textC is blank everytime. If I create a simple select for Text Color, my form submits fine, and all variables are available on the next page via POST.

Any thoughts to why the the textC value is always blank with this code?

var black = [
{display: "Gray", value: "gray" }, 
{display: "Warm Red", value: "red" }, 
{display: "White", value: "white" }];

var white = [
{display: "Black", value: "black" }, 
{display: "Gray", value: "gray" }, 
{display: "Warm Red", value: "red" }];

var gray = [
{display: "Black", value: "black" }, 
{display: "Warm Red", value: "red" }, 
{display: "White", value: "white" }];

$("#parent_selection").change(function() {
    var parent = $(this).val(); //get option value from parent 
    
    switch(parent){ //using switch compare selected option and populate child
          case 'black':
            list(black);
            break;
          case 'white':
            list(white);
            break;              
          case 'gray':
            list(gray);
            break;  
          default: //default child option is blank
            $("#textC").html('');  
            break;
       }
});

//function to populate child select box
function list(array_list)
    {
    $("#textC").html(""); //reset child options
    $(array_list).each(function (i) { //populate child options 
        $("#textC").append("<option value=''+array_list[i].value+''>"+array_list[i].display+"</option>");
    });
}

<p><b>Background Color ?</b><br>
<select name="theme" id="parent_selection">
    <option value="">-- Please Select --</option>
    <option value="black">Black</option>
    <option value="white">White</option>
    <option value="gray">Gray</option>
</select>

<p><b>Text Color?</b><br>			
<select name="textC" id="textC">
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Tom el Safadi · Accepted Answer · 2017-06-07 00:43:30Z

1

Can you try this instead:

//function to populate child select box
function list(array_list)
{
    $("#textC").html(""); //reset child options
    $(array_list).each(function (i) { //populate child options 
        $('<option>').val(array_list[i].value).text(array_list[i].display).appendTo('#textC');
    });
}

JSFiddle: https://jsfiddle.net/Anokrize/t1w1k463/

edited Jun 7, 2017 at 0:43

answered Jun 7, 2017 at 0:37

Tom el Safadi

6,9167 gold badges59 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vacek Over a year ago

when I try this, the dynamic dropdown does not populate at all when I select something in the other one.

Jeric Cruz · Accepted Answer · 2017-06-07 00:59:09Z

0

you can have other option by using select2 https://select2.github.io/

//set each item to id=value, text=display
var black = [
{text:"", id:""},
{text: "Gray", id: "gray" }, 
{text: "Warm Red", id: "red" }, 
{text: "White", id: "white" }];

//initialized select2 control.
$("#textC").select2({
    data: black,
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1, 
    placeholder: "choose item",
    selectOnClose: true,
    closeOnSelect: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="textC" name="textC" style="width:100%"></select>

edited Jun 7, 2017 at 0:59

answered Jun 7, 2017 at 0:48

Jeric Cruz

1,9071 gold badge16 silver badges30 bronze badges

1 Comment

Jeric Cruz Over a year ago

yup, very handy, you can also set the data values from an ajax json result.

Collectives™ on Stack Overflow

Dynamic Dropdown, JQuery, Not Submitting form with Value

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related