Question

我想根据我们选择的内容显示一些文字。这是我的选择选项：

<select onchange=Change(this.value)>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<p></p>

我想应用一个函数，根据选择的选项将某个文本插入到p元素中。这是功能：

Change(x){
if (x=="1"){$("p").innerHTML ="One cat"}
if (x=="2"){$("p").innerHTML ="Two cats"}
}

这是一个小提琴： https://jsfiddle.net/tksbkmdj/2/

Answer 1

这里有一些注意事项：

1-您需要声明函数Change

2-使用jQuery，您不会innerHtml，而是.html(newtext)，例如。

你走了：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function Change(x) {
    if (x == "1") {
      $("p").html("One cat")
    }
    if (x == "2") {
      $("p").html("Two cats")
    }
  }
</script>

<select onchange=Change(this.value)>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<p>
</p>

＆＃13;

Answer 2

如果您使用的是jQuery，可以大大简化：

function Change(x){
  if (x=="1"){
    $("p").text("One cat");
  }
  if (x=="2"){
    $("p").text("Two cats");
  }
}
  
$("select").change(function() {
  Change(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<p></p>

Answer 3

试试这段代码。 innerHTML适用于JavaScript 试试text()或html()

$("p").text("One Cat");
$("p").text("Two Cats");

或者

$("p").html("One Cat");
$("p").html("Two Cats");

Answer 4

你有以下错误：

不＆＃34;功能＆＃34;之前＆＃34;改变＆＃34;
更好地命名并改变＆＃34;
$（＆＃34; p＆＃34;）返回一个jquery对象，你应该使用＆＃34; $（＆＃39; p＆＃39;）[0]＆＃34;或＆＃34; $（＆＃39; p＆＃39;）。html＆＃34;
该函数不在全局范围内，因此您无法像那样调用它

检查此https：enter code here // jsfiddle.net/ftb0tmds /

Javascript根据值选择并更改元素的内容

4 个答案: