How to dynamically re-phrase the text based on drop down selection

Question

I have a requirement to build a survey with multiple questions. Based on the response to one of the questions (selected from the drop down) I need to rephrase the next question which also involves drop down selection. I am doing a function call onchange and changing the text of next question and it is getting changes, but the dropdown is not getting displayed. Below is the code snippet. Please let me know what is going wrong.

HTML:

<div class="section" id="question" style="text-align: center;"><!-- Put the questions here - Start -->
<div class="section single-question" id="qs6" onchange="capture()">
<p><span class="number">6.</span>What do you like most about us?</p>
<div class="custom-select"><select id="q6_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">ABCD</option>
<option value="E">EFGH</option>
<option value="G">Greatly satisfied by the service</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message">Please select an item from the menu</div>
</div>
<div class="textarea-container">
<div></div>
<div class="error-message">Please fill out the required field</div>
</div>
</div>
<div class="section single-question" id="qs7">
<p>Why you decided to select:</p>
<div class="custom-select"><select id="q6_select" data-storage="experience_call">
<option value="">Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="Others">Others Specify</option>
</select>
<div class="error-message">Please select an item from the menu</div>
</div>
<div class="textarea-container">
<div></div>
<div class="error-message">Please fill out the required field</div>
</div>
</div>

Script:

function capture() {
var qselect = $("#q6_select").find('option:selected').text();
if(qselect.indexOf("BCD") > 0)
{
  $('#qs7').text('You have selected: ABCD');
}
else if(qselect.indexOf("FGH") > 0)
{
  $('#qs7').text('You have selected: EFGH');
}
}

Answer 1

Have added an Id pId to the

<p id='pId'>Why you decided to select:</p>

and then in the script added the below code. This worked as per the requirement.

 var ptag = docuemnt.getElementById('pId');
ptag.innerhtml = "Your string here";

Answer 2

Try this:

var Options = {
  'A': {
    "Please select": "",
    "A": "A value",
    "B": "B value",
    "C": "C value",
    "D": "D value",
  },
  'E': {
    "Please select": "",
    "E": "E value",
    "F": "F value",
    "G": "G value",
    "H": "H value",
  },
  'G': {
    "Please select": "",
    "G": "G value",
  },
  'Others': {
    "Please select": "",
    "Others": "Others value",
  },
};

$('#q6_select').on('change', function(e) {

  if (this.value == "") {
    $('#qs7').hide();
    $('#error-message-1, #error-message-2').show();
  } else {
    $('#qs7').text('You have selected: ' + this.options[this.selectedIndex].innerText);
    $('#error-message-1, #error-message-2').hide();
    $('#error-message-3, #error-message-4').show();
    $('#q7_select').empty();
    $.each(Options[this.value], function(key, value) {
      $('#q7_select').append($("<option></option>").attr("value", value).text(key));
    });
  }
});
$('#q7_select').on('change', function(e) {
  if (this.value == "") {
    $('#error-message-3, #error-message-4').show();
  } else {
    $('#error-message-3, #error-message-4').hide();
  }
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="section" id="question" style="text-align: center;"><!-- Put the questions here - Start -->
    <div class="section single-question" id="qs6">
    <p><span class="number">6.</span>What do you like most about us?</p>
    <div class="custom-select"><select id="q6_select" data-storage="experience_call">
    <option value="">Please select</option>
    <option value="A">ABCD</option>
    <option value="E">EFGH</option>
    <option value="G">Greatly satisfied by the service</option>
    <option value="Others">Others Specify</option>
    </select>
    <div class="error-message" id="error-message-1">Please select an item from the menu</div>
    </div>
    <div class="textarea-container">
    <div></div>
    <div class="error-message"  id="error-message-2">Please fill out the required field</div>
    </div>
    </div>
    <div class="section single-question" id="qs7"></div>
    <p>Why you decided to select:</p>
    <div class="custom-select"><select id="q7_select" data-storage="experience_call">
    <option value="">Please select</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="Others">Others Specify</option>
    </select>
    <div class="error-message" id="error-message-3">Please select an item from the menu</div>
    
    <div class="textarea-container">
    <div></div>
    <div class="error-message" id="error-message-4">Please fill out the required field</div>
    </div>
    </div>

Answer 3

I think you have a small error in this line

<div class="section single-question" id="qs7">

You need to close the div and keep it as an empty div, like this:

<div class="section single-question" id="qs7"> </div>

When you are running your JS code, you are replacing all of its contents which includes the next dropdown. See JsFiddle

You can also replace the .text method to use .innerHtml if you want to add some html in that div. Read more here.

I think the above answers your exact question on why the next dropdown is gone. If now you want to also then have some logic to control the next dropdown content, I think this stackoverflow answer will answer it.