根据以前的下拉选项编辑下拉选项

时间:2014-09-29 13:52:46

标签: javascript html dropdownbox

我进行了客户调查,其中一个部分要求用户按重要性顺序从1到5评价这些内容。

便利, 质量, 价钱, 回转, 沟通,

所以我有5个下拉框,我想在其中显示数字1到5减去已经选择的数字。

在阅读了有关stackoverflow的类似性质的问题并使用了一些答案来汇总一些代码到目前为止我已经设置了这个HTML:

                <tr>
                    <td>
                        <center>
                        <select name="convenience" id="convenience" onChange="populateSelect()">
                            <option></option>
                            <option <?php if($convenience == 1){echo "SELECTED";}?> value="1">1</option>
                            <option <?php if($convenience == 2){echo "SELECTED";}?> value="2">2</option>
                            <option <?php if($convenience == 3){echo "SELECTED";}?> value="3">3</option>
                            <option <?php if($convenience == 4){echo "SELECTED";}?> value="4">4</option>
                            <option <?php if($convenience == 5){echo "SELECTED";}?> value="5">5</option>
                        </select>
                        </center>
                    </td>
                    <td>
                        <center>
                        <select name="quality" id="quality" onChange="populateSelect()">

                        </select>
                        </center>
                    </td>
                    <td>
                        <center>
                        <select name="price" id="price" onChange="populateSelect()">

                        </select>
                        </center>
                    </td>
                    <td>
                        <center>
                        <select name="turnaround" id="turnaround" onChange="populateSelect()">

                        </select>
                        </center>
                    </td>
                    <td>
                        <center>
                        <select name="communication" id="communication">

                        </select>
                        </center>
                    </td>                                                                                                   
                </tr>

这个Javascript函数:

            function populateSelect(){
                convenience=$('#convenience').val();
                quality=$('#quality').val();
                price=$('#price').val();
                turnaround=$('#turnaround').val();
                communication=$('#communication').val();
                $('#quality').html('');
                $('#price').html('');
                $('#turnaround').html('');
                $('#communication').html('');
                //Check convenience selection and populate quality accordingly
                if(convenience == 1){ 
                    $('#quality').append('<option>2</option>');
                    $('#quality').append('<option>3</option>');
                    $('#quality').append('<option>4</option>');
                    $('#quality').append('<option>5</option>');
                }else if(convenience == 2){
                    $('#quality').append('<option>1</option>');
                    $('#quality').append('<option>3</option>');
                    $('#quality').append('<option>4</option>');
                    $('#quality').append('<option>5</option>');
                }else if(convenience == 3){
                    $('#quality').append('<option>1</option>');
                    $('#quality').append('<option>2</option>');
                    $('#quality').append('<option>4</option>');
                    $('#quality').append('<option>5</option>');
                }else if(convenience == 4){
                    $('#quality').append('<option>1</option>');
                    $('#quality').append('<option>2</option>');
                    $('#quality').append('<option>3</option>');
                    $('#quality').append('<option>5</option>');
                }else if(convenience == 5){
                    $('#quality').append('<option>1</option>');
                    $('#quality').append('<option>2</option>');
                    $('#quality').append('<option>3</option>');
                    $('#quality').append('<option>4</option>');
                }
                //Check quality selection and populate quality accordingly
                if(quality == 1 || convenience ==1){ 
                    $('#price').append('<option>2</option>');
                    $('#price').append('<option>3</option>');
                    $('#price').append('<option>4</option>');
                    $('#price').append('<option>5</option>');
                }else if(quality == 2 || convenience ==2){
                    $('#price').append('<option>1</option>');
                    $('#price').append('<option>3</option>');
                    $('#price').append('<option>4</option>');
                    $('#price').append('<option>5</option>');
                }else if(quality == 3 || convenience ==3){
                    $('#price').append('<option>1</option>');
                    $('#price').append('<option>2</option>');
                    $('#price').append('<option>4</option>');
                    $('#price').append('<option>5</option>');
                }else if(quality == 4 || convenience ==4){
                    $('#price').append('<option>1</option>');
                    $('#price').append('<option>2</option>');
                    $('#price').append('<option>3</option>');
                    $('#price').append('<option>5</option>');
                }else if(quality == 5 || convenience ==5){
                    $('#price').append('<option>1</option>');
                    $('#price').append('<option>2</option>');
                    $('#price').append('<option>3</option>');
                    $('#price').append('<option>4</option>');
                }
                //Check price selection and populate quality accordingly
                if(price == 1 || quality == 1 || convenience == 1){ 
                    $('#turnaround').append('<option>2</option>');
                    $('#turnaround').append('<option>3</option>');
                    $('#turnaround').append('<option>4</option>');
                    $('#turnaround').append('<option>5</option>');
                }else if(price == 2 quality == 2 || convenience == 2){
                    $('#turnaround').append('<option>1</option>');
                    $('#turnaround').append('<option>3</option>');
                    $('#turnaround').append('<option>4</option>');
                    $('#turnaround').append('<option>5</option>');
                }else if(price == 3 quality == 3 || convenience == 3){
                    $('#turnaround').append('<option>1</option>');
                    $('#turnaround').append('<option>2</option>');
                    $('#turnaround').append('<option>4</option>');
                    $('#turnaround').append('<option>5</option>');
                }else if(price == 4 quality == 4 || convenience == 4){
                    $('#turnaround').append('<option>1</option>');
                    $('#turnaround').append('<option>2</option>');
                    $('#turnaround').append('<option>3</option>');
                    $('#turnaround').append('<option>5</option>');
                }else if(price == 5 quality == 5 || convenience == 5){
                    $('#turnaround').append('<option>1</option>');
                    $('#turnaround').append('<option>2</option>');
                    $('#turnaround').append('<option>3</option>');
                    $('#turnaround').append('<option>4</option>');
                }
                //Check turnaround selection and populate quality accordingly
                if(turnaround == 1 || price == 1 || quality == 1 || convenience == 1){ 
                    $('#communication').append('<option>2</option>');
                    $('#communication').append('<option>3</option>');
                    $('#communication').append('<option>4</option>');
                    $('#communication').append('<option>5</option>');
                }else if(turnaround == 2 || price == 2 || quality == 2 || convenience == 2){
                    $('#communication').append('<option>1</option>');
                    $('#communication').append('<option>3</option>');
                    $('#communication').append('<option>4</option>');
                    $('#communication').append('<option>5</option>');
                }else if(turnaround == 3 || price == 3 || quality == 3 || convenience == 3){
                    $('#communication').append('<option>1</option>');
                    $('#communication').append('<option>2</option>');
                    $('#communication').append('<option>4</option>');
                    $('#communication').append('<option>5</option>');
                }else if(turnaround == 4 || price == 4 || quality == 4 || convenience == 4){
                    $('#communication').append('<option>1</option>');
                    $('#communication').append('<option>2</option>');
                    $('#communication').append('<option>3</option>');
                    $('#communication').append('<option>5</option>');
                }else if(turnaround == 5 || price == 5 || quality == 5 || convenience == 5){
                    $('#communication').append('<option>1</option>');
                    $('#communication').append('<option>2</option>');
                    $('#communication').append('<option>3</option>');
                    $('#communication').append('<option>4</option>');
                }                                           
            }

但是你可以猜到它不起作用。我被困住了,无法找到解决方案。

0 个答案:

没有答案