Редактирование выпадающих опций на основе предыдущих выпадающих опций

У меня есть опрос клиентов, и один из разделов просит пользователя оценить эти вещи в порядке важности от 1 до 5.

Удобство, Качество, Цена, Оборот, Коммуникация,

Таким образом, у меня есть 5 выпадающих списков, в которых я хочу отобразить цифры от 1 до 5 минус те цифры, которые уже были выбраны.

После прочтения вопросов аналогичного характера в stackru и использования битов ответов для составления некоторого кода, я установил этот 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 ответов

Другие вопросы по тегам