Okay, to do that you will need to use JavaScript to:
- Define the select element (dropdown)
- Hide the text input
- Insert the select elements
- Initially select an option if the question has already been answered
- Insert selected values into the hidden text input when the dropdown is changed
Add the following script to the source of the your question.
Replace "QQ" with the
question ID and "NN" with the row number of the text input you would like to replace.
Modify the HTML for the dropdown as required.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var qID = QQ;
var inputNum = NN;
// Define the select element (dropdown)
var select1 = '<select id="select1"> \
<option value="">-- Please Choose --</option> \
<option value="Apples">Apples</option> \
<option value="Oranges">Oranges</option> \
<option value="Pears">Pears</option> \
<option value="Bananas">Bananas</option> \
</select>';
// Hide the text input
$('#question'+qID+' li:eq('+(inputNum-1)+') input.text').hide().parent().hide();
// Insert the select elements
$('#question'+qID+' li:eq('+(inputNum-1)+')').append(select1);
// Initially select an option if the question has already been answered
if($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val()) {
$('#question'+qID+' li:eq('+(inputNum-1)+') select').val($('#question'+qID+' li:eq('+(inputNum-1)+') input.text').val())
}
// Listener on the dropdowns - insert selected values into hidden text input
$('#question'+qID+' select').change(function() {
$(this).siblings('span').children('input.text').val($(this).val());
});
// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 1em'
});
});
</script>
