问题
我有2个差异下拉选择框。第一个选择框是静态的,而另一个是根据第一个选择框中选择的值动态生成的。这些值正在生成正确但当我尝试显示第二个选择框的值时,它只显示第一个选项的值,即使选择了第3个或第4个选项。请参阅下面的代码和示例:
Javascript代码
function wpPopulate(){
$('#win_parameter').empty();
var classes = document.getElementById('noOfClasses').value;//total number of classes
var percent = (100/classes);//to get a percentage for single class
//console.log("1 class: "+percent+"%");
//Define Variables
var wpOptions = '';
var dd = '';
for(var i=1; i<=classes; i++){
dd = parseFloat(percent*i).toFixed(2)+"% ("+i+" class)";
wpOptions += '"'+parseFloat(percent*i).toFixed(2)+'": "'+dd+'", ';
}
wpOptions = "{"+wpOptions.substr(0, (wpOptions.length-2))+"}";
wpOptions = $.parseJSON(wpOptions);
var selectValues = wpOptions;
$.each(selectValues, function(key, value) {
$('#win_parameter')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
HTML代码:
(选择框1)
<select name="noOfClasses" id="noOfClasses" onChange="wpPopulate();">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
(选择框2)
<select name="win_parameter" id="win_parameter">
</select>
示例:
在第一个选择框中选择 5个类时,第二个选择框中的选项如下所示。当我选择除20%之外的任何东西时,它仍显示为20%,例如60%。任何帮助或指导将不胜感激!!
<select name="win_parameter" id="win_parameter">
<option value="20.00">20.00% (1 class)</option>
<option value="40.00">40.00% (2 class)</option>
<option value="60.00">60.00% (3 class)</option>
<option value="80.00">80.00% (4 class)</option>
<option value="100.00">100.00% (5 class)</option>
</select>