我有下面的代碼,創建基於另一個下拉列表中選擇一個動態下拉菜單(Text Color
)(Background Color
)動態下拉,JQuery的,不提交形式與價值
它按預期工作,並填充文本顏色下拉完美。
但是,當我提交表單時,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>
當我嘗試這個,動態下拉不,當我選擇另一種東西來填充的。 – Vacek
它在我的小提琴中起作用。我編輯它。 – Anokrize
現在完美工作,感謝百萬! – Vacek