根据下拉值更改复杂文本

Question

我想有一些模糊看起来像这样的代码：

What is your experience level?<br>
<select>
    <option value="1">Inexperienced</option>
    <option value="2">Some experience</option>
    <option value="3">Expert</option>
<select>
<div> [custom text would go here] </div>

我希望div 中的自定义文本根据下拉选项自动填充。 我已经看到了一些JavaScript解决方案，但文本总是很简单，javascript可能包括：

myarr[1]="custom text #1"
myarr[2]="custom text #2"

但是我想要填写的文本会更复杂，并且会包含引号，这肯定会破坏该 javascript，例如：

custom_text[1]:
Please contact John Novice<br>
<div class="pushbutton"><a href="mailto:[e-mail]">[e-mail]</a></div>
<div class="pushbutton"><a href="tel:[phone]">800-555-9994</a></div>
custom_text[2]:
Please contact Jane Intermediate<br>
<div class="pushbutton"><a href="mailto:[e-mail]">[e-mail]</a></div>
<div class="pushbutton"><a href="tel:[phone]">800-555-9995</a></div>

这样的事情可能吗？ FWIW，我是一个JavaScript新手，所以要温柔。 感谢您的任何帮助。

Answer 1

您可以设置div 的innerHTML。此外，您需要确保变量可以保存 HTML 内容并分配一个 onchange 事件处理程序，每当下拉列表中的选定选项发生更改时，都会触发该处理程序。

var custom_text =  'Please contact John Novice<br> 
<div class="pushbutton"><a  href="mailto:[e-mail]">[e-mail]</a></div> 
<div class="pushbutton"><a href="tel:[phone]">800-555-9994</a></div>';
document.getElementById("divContent").innerHTML = custom_text;

完整代码：

var custom_text =  'Please contact John Novice<br> 
<div class="pushbutton"><a  href="mailto:[e-mail]">[e-mail]</a></div> 
<div class="pushbutton"><a href="tel:[phone]">800-555-9994</a></div>';
function addContent(){
document.getElementById("divContent").innerHTML = custom_text;
}

What is your experience level?<br>
<select onchange="addContent()">
    <option value="1">Inexperienced</option>
    <option value="2">Some experience</option>
    <option value="3">Expert</option>
<select>
<div id="divContent">  </div>

Answer 2

一种方法是使用CSS和很少的javascript

首先，您将所有 HTML 添加到"目标"div 内的div，这些div 是隐藏的

例如，使用易于构建的 CSS，您可以在目标div 具有特定类时取消隐藏相应的div。为了使事情变得非常简单，您将选项的值用作每个"sub"div的类，当主div具有相同的类时，它会导致显示subdiv

document.getElementById('selector').addEventListener('change', function(e) {
    document.getElementById('target').className = this[this.selectedIndex].value;
})

#target>div {
    display: none;
}
#target.none>div.none {
    display: block;
}
#target.some>div.some {
    display: block;
}
#target.expert>div.expert {
    display: block;
}

<Select id="selector">
    <option value="" selected disabled>Select</option>
    <option value="none">Inexperienced</option>
    <option value="some">Some Experience</option>
    <option value="expert">Expert</option>
</Select>
<div id="target">
    <div class="none">You are <b>inexperienced</b></div>
    <div class="some">You have <b>some</b> experience</div>
    <div class="expert">You are an <b>expert</b></div>
</div>

Answer 3

我不太理解你的问题，但我试着猜测你正在找到这样的东西：

jQuery

var tempText = "Please contact Jane Intermediate<br><div class='pushbutton'><a href='mailto:[e-mail]'>[e-mail]</a></div><div class='pushbutton'><a href='tel:[phone]'>800-555-9995</a></div>";
$(document).ready(function (){
  $("#slct").on("change", function (){
    $("#selectResult").html(tempText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
What is your experience level?<br>
<select id="slct">
    <option value="1">Inexperienced</option>
    <option value="2">Some experience</option>
    <option value="3">Expert</option>
<select>
<div id="selectResult">  </div>

纯 Js ：

var tempText1 = "Please contact Jane begginer<br><div class='pushbutton'><a href='mailto:[e-mail]'>[e-mail]</a></div><div class='pushbutton'><a href='tel:[phone]'>800-555-9995</a></div>";
var tempText2 = "Please contact Jane Intermediate<br><div class='pushbutton'><a href='mailto:[e-mail]'>[e-mail]</a></div><div class='pushbutton'><a href='tel:[phone]'>800-555-9995</a></div>";
var tempText3 = "Please contact Jane advance<br><div class='pushbutton'><a href='mailto:[e-mail]'>[e-mail]</a></div><div class='pushbutton'><a href='tel:[phone]'>800-555-9995</a></div>";
//document.getElementById("slct").change = vlCng();
function vlCng() {
  var txt = "--";
  var val = document.getElementById("slct").value;
  if (val === "1")
    txt = tempText1;
  if (val === "2")
    txt = tempText2;
  if (val === "3")
    txt = tempText3;
  document.getElementById("selectResult").innerHTML = txt;
}

What is your experience level?<br>
<select onchange="vlCng()" id="slct">
        <option value="0"></option>
        <option value="1">Inexperienced</option>
        <option value="2">Some experience</option>
        <option value="3">Expert</option>
<select>
<div id="selectResult">  </div>

Answer 4

您

需要做的就是用反斜杠转义引号。例如：

var str = "Please contact John Novice<br><div class="pushbutton"><a href="mailto:[e-mail]">[e-mail]</a></div><div class="pushbutton"><a href="tel:[phone]">800-555-9994</a></div>";

Answer 5

这当然是可能的。

我假设你想要你的 HTML 中的数据，你可以把它添加到 value 属性中，它将被设置：

function change() {
  var x = document.getElementById("mySelect").value;
  var output = document.getElementById('output');
  
  output.innerHTML = x;
}

<select id="mySelect" onChange="change()">
    <option value='
    Please contact John Novice<br>
    <div class="pushbutton"><a href="mailto:[e-mail]">
      [e-mail]
    </a></div>
    <div class="pushbutton"><a href="tel:[phone]">
        800-555-9994
    </a></div>'>
    
      Inexperienced
    
    </option>
    <option value='
    Please contact Medium<br>
    <div class="pushbutton"><a href="mailto:[e-mail]">
      [e-mail]
    </a></div>
    <div class="pushbutton"><a href="tel:[phone]">
        800-555-9995
    </a></div>'>
    
      Some experience
    
    </option>
    
    <option value="3">Expert</option>
<select>
<div id="output"> [custom text would go here] </div>