如何根据下拉选择动态地对文本进行重新短语

Question

我需要构建一个包含多个问题的调查。根据对其中一个问题的回答(从下拉列表中选择)，我需要重新表述下一个问题，这也涉及下拉选择。我正在做一个函数调用onchange并更改下一个问题的文本，它正在得到更改，但下拉列表没有显示。下面是代码片段。请告诉我出了什么问题。

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>

脚本：

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

我想你在这一行有个小错误

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

您需要关闭div并将其保留为空div，如下所示：

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

当您运行JS代码时，您将替换它的所有内容，其中包括下一个下拉列表。请参阅JsFiddle

如果您想要在.innerHtml中添加一些html，也可以替换.text方法来使用该div。阅读更多here。

我认为上面回答了你的问题，为什么下一个下拉菜单消失了。如果你现在想要有一些逻辑来控制下一个下拉内容，我想这个stackoverflow answer可以满足你的需求。

Answer 2

试试这个：

​

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

已将Id pId添加到

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

然后在脚本中添加以下代码。这是按照要求工作的。

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