动态下拉，JQuery的，不提交形式与价值

Question

我有下面的代码，创建基于另一个下拉列表中选择一个动态下拉菜单（Text Color）（Background Color）

它按预期工作，并填充文本颜色下拉完美。

但是，当我提交表单时，textC的值每次都是空白。如果我为Text Color创建了一个简单的选择，我的表单提交正常，并且所有变量都可通过POST在下一页上获得。

任何想法为什么textC值总是空白与此代码？

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> \t \t \t 
 
<select name="textC" id="textC"> 
 
</select> 
 

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

Answer 1

你可以试试这个来代替：

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

Answer 2

你可以有其他选项可以使用select2https://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>