无法从动态生成的下拉列表中获取值

时间:2014-08-04 10:32:36

标签: javascript jquery html

问题

我有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>

0 个答案:

没有答案