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');
}
}

Do you really mean to output the result to `qs7`? `qs7` is a `div` with a lot of descendants!!! If that's exactly what you're trying to achieve then the use the `html` function instead of `text` — Leo, Feb 01 '19 at 04:14
I think your means that when the user selects true value will show next dropdown, right? — Tomato32, Feb 01 '19 at 04:33
@Leo, Tomato32 I need to change only the text inside the qs7 based on the selection in qs6. I can't close the qs7 div before the dropdown. I can't put one more div for the text as well. — Rajesh Bhat, Feb 01 '19 at 07:20
@RajeshBhat that doesn't make any sense. `qs7` has a bunch child html elements inside, there's NO text. What do you mean by "change the text"? What text? — Leo, Feb 01 '19 at 09:34

score 1 · Answer 1 · answered Feb 01 '19 at 04:47

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.

Artee · Answer 2 · 2019-02-02T08:40:54.057

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>

I need to modify the existing text, this is adding a new text. — Rajesh Bhat, Feb 01 '19 at 17:11

score 0 · Answer 3 · answered Feb 13 '19 at 13:12

0

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";

answered Feb 13 '19 at 13:12

Rajesh Bhat

791
3
8
20

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

3 Answers3