Dear Community of Limesurvey,
I have been struggling with the following code on limesurvey. I am using javascript for a drop-down array that will ask participants what brand the are using and also provide specific features.
I have trouble with the specific features of the brand. I have already manage to implement the code from tpartner for the use of dropdown menu's in a text array.
However I would like to add 3 columns that would have conditional answers.
For example:
The first dropdown question: Brand A/B/C
Second dropdown question (conditional to which brand has been filled in): Brand A -> Feature 1/2/3; Brand B Feature 4/ 5 / 6; Brand C -> Feature 7-8-9
Third dropdown question (also conditional to the first dropdown question): Brand A -> Feature A1/A2/A3 Brand B -> Feature B1/B2/B3 Brand C -> Feature C1/C2/C3
The code that I have now:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var qID = {9997};
// Define the select element (dropdown)
var select1 = '<select class="insertedSelect">\
<option value="">-- Please Choose --</option>\
<option value="A">Brand A</option>\
<option value="B">Brand B</option>\
<option value="C">Brand C</option>\
</select>';
var select2 = '<select class="insertedSelect2">\
<option value="">-- Please Choose --</option>\
<option value="AF">Brand A feature 1</option>\
<option value="AF">Brand A feature 2</option>\
<option value="AF">Brand A feature 3</option>\
</select>';
var select3 = '<select class="insertedSelect3">\
<option value="">-- Please Choose --</option>\
<option value="BF">Brand B feature 1</option>\
<option value="BF">Brand B feature 2</option>\
<option value="BF">Brand B feature 3</option>\
</select>';
var select4 = '<select class="insertedSelect4">\
<option value="">-- Please Choose --</option>\
<option value="CF">Brand C feature 1</option>\
<option value="CF">Brand C feature 2</option>\
<option value="CF">Brand C feature 3</option>\
</select>';
// Hide the text inputs
$('#question'+qID+' .answer_cell_00SQ002 input[type="text"]').hide();
$('#question'+qID+' .answer_cell_00SQ003 input[type="text"]').hide();
// Insert the select elements
$('#question'+qID+' .answer_cell_00SQ002').append(select1);
// Initially select an option if the question has already been answered
$('#question'+qID+' .answer_cell_00SQ002 input[type="text"]').each(function(i){
if($(this).val()) {
$(this).closest('td').find('.insertedSelect').val($(this).val());
}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('.insertedSelect').change(function() {
$(this).closest('td').find('input[type="text"]').val($(this).val());
});
/// If statement for selection of dropdown answers based if brand A is selected
$('#question'+qID+' .answer_cell_00SQ002 input[type="text"]').each(function(i){
if($(this).val()!="A") {
// Insert the select elements
$('#question'+qID+' .answer_cell_00SQ003').append(select2);
$('#question'+qID+' .answer_cell_00SQ003 input[type="text"]').each(function(i){
if($(this).val()) {
$(this).closest('td').find('.insertedSelect2').val($(this).val());}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('.insertedSelect2').change(function() {
$(this).closest('td').find('input[type="text"]').val($(this).val());
});
}});
/// If statement for selection of dropdown answers based if brand B is selected
$('#question'+qID+' .answer_cell_00SQ002 input[type="text"]').each(function(i){
if($(this).val()!="B") {
// Insert the select elements
$('#question'+qID+' .answer_cell_00SQ003').append(select3);
$('#question'+qID+' .answer_cell_00SQ003 input[type="text"]').each(function(i){
if($(this).val()) {
$(this).closest('td').find('.insertedSelect3').val($(this).val());}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('.insertedSelect3').change(function() {
$(this).closest('td').find('input[type="text"]').val($(this).val());
});
}});
/// If statement for selection of dropdown answers based if brand C is selected
$('#question'+qID+' .answer_cell_00SQ002 input[type="text"]').each(function(i){
if($(this).val()!="C") {
// Insert the select elements
$('#question'+qID+' .answer_cell_00SQ003').append(select4);
$('#question'+qID+' .answer_cell_00SQ003 input[type="text"]').each(function(i){
if($(this).val()) {
$(this).closest('td').find('.insertedSelect4').val($(this).val());}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('.insertedSelect4').change(function() {
$(this).closest('td').find('input[type="text"]').val($(this).val());
});
}});
});
</script>
I believe there is something wrong with the IF statement that tries to match the answers of the first dropdown question.
There may be a better way to approach this problem, but I have not been able to figure it out yet.
I am open for any suggestions/feedback for this code or on a different approach to this problem.
Topic Author
