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:john.novice@example.com">john.novice@example.com</a></div>
<div class="pushbutton"><a href="tel:+18005559994">800-555-9994</a></div>

custom_text[2]:
Please contact Jane Intermediate<br>
<div class="pushbutton"><a href="mailto:jane.intermediate@example.com">jane.intermediate@example.com</a></div>
<div class="pushbutton"><a href="tel:+18005559995">800-555-9995</a></div>

这样的事情可能吗？ FWIW，我是一个javascript新手，所以要温柔。谢谢你的帮助。

Answer 1

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

var str = "Please contact John Novice<br><div class=\"pushbutton\"><a href=\"mailto:john.novice@example.com\">john.novice@example.com</a></div><div class=\"pushbutton\"><a href=\"tel:+18005559994\">800-555-9994</a></div>";

Answer 2

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

var custom_text =  'Please contact John Novice<br> \
<div class="pushbutton"><a \ href="mailto:john.novice@example.com">john.novice@example.com</a></div> \
<div class="pushbutton"><a href="tel:+18005559994">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:john.novice@example.com">john.novice@example.com</a></div> \
<div class="pushbutton"><a href="tel:+18005559994">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 3

我不太了解你的问题但是我猜想你发现了这样的事情：

的jQuery

var tempText = "Please contact Jane Intermediate<br><div class='pushbutton'><a href='mailto:jane.intermediate@example.com'>jane.intermediate@example.com</a></div><div class='pushbutton'><a href='tel:+18005559995'>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>

Pure Js：

var tempText1 = "Please contact Jane begginer<br><div class='pushbutton'><a href='mailto:jane.intermediate@example.com'>jane.intermediate@example.com</a></div><div class='pushbutton'><a href='tel:+18005559995'>800-555-9995</a></div>";
var tempText2 = "Please contact Jane Intermediate<br><div class='pushbutton'><a href='mailto:jane.intermediate@example.com'>jane.intermediate@example.com</a></div><div class='pushbutton'><a href='tel:+18005559995'>800-555-9995</a></div>";
var tempText3 = "Please contact Jane advance<br><div class='pushbutton'><a href='mailto:jane.intermediate@example.com'>jane.intermediate@example.com</a></div><div class='pushbutton'><a href='tel:+18005559995'>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

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

首先，将所有HTML添加到＆＃34; target＆＃34;中的div。 div，隐藏

使用易于制作的CSS，您可以在目标div具有特定类时取消隐藏相应的div，例如。为了使事情真正简单，您可以将选项的值用作每个＆＃34; sub＆＃34;的类。 div，当主div具有相同的类时，它会导致显示子div

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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:john.novice@example.com">
      john.novice@example.com
    </a></div>
    <div class="pushbutton"><a href="tel:+18005559994">
        800-555-9994
    </a></div>'>
    
      Inexperienced
    
    </option>
    <option value='
    Please contact Medium<br>
    <div class="pushbutton"><a href="mailto:john.novice@example.com">
      medium@example.com
    </a></div>
    <div class="pushbutton"><a href="tel:+18005559994">
        800-555-9995
    </a></div>'>
    
      Some experience
    
    </option>
    
    <option value="3">Expert</option>
<select>

<div id="output"> [custom text would go here] </div>

根据下拉值更改复杂文本

5 个答案: