Редактирование выпадающих опций на основе предыдущих выпадающих опций
У меня есть опрос клиентов, и один из разделов просит пользователя оценить эти вещи в порядке важности от 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>');
}
}
Но, как вы можете догадаться, это не работает. И я застрял и не могу найти решение.