javascript - 根据所选选项显示HTML

首先，让我说我正在尝试修改现有的代码，我对jQuery很不熟悉，所以脚本的部分可能是过时的。
我会有一个带有整数的选择菜单，当它们被选中时，我想在span I d“stylediv”中设置HTML
javascript代码：

<script>
function styleselect() {
    if (document.getElementById('globalstyleselect').value == "3") {
    $(".stylediv").html('<b>Boca Style</b>');
  }
    if (document.getElementById('globalstyleselect').value == "2") {
    $(".stylediv").html('<b>Bella Style</b>');}
}
    if (document.getElementById('globalstyleselect').value == "1") {
    $(".stylediv").html('<b>Terra Style</b>');
}
</script>

Html格式：

<select id="globalstyleselect" onchange="styleselect()">
<option value="1">Terra</option>
<option value="2">Bella </option>
<option value="3">Boca</option>
</select>


<span id="stylediv">Text to display here</span>

最佳答案

更改此$(".stylediv")的$("#stylediv")，因为.stylediv表示所有具有类stylediv的元素，而#stylediv表示所有具有idstylediv的元素。
在您的情况下，您有一个具有此id（<span id="stylediv">Text to display here</span>）的div，因此必须使用id选择器。
另外，我建议您不要重复同一个选择器这么多次（这很容易出错）；而是将它放在一个变量中并使用它。。。并保持代码的一致性：如果使用jQuery，则获取jQuery的所有元素（尽管这是一个首选项问题）
下面的代码片段也对js进行了改进。

function styleselect() {
  var value = $('#globalstyleselect').val();
  var div = $("#stylediv");
  if (value == "3") {
    div.html('<b>Boca Style</b>');
  }
  if (value == "2") {
    div.html('<b>Bella Style</b>');
  }
  if (value == "1") {
    div.html('<b>Terra Style</b>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="globalstyleselect" onchange="styleselect()">
  <option value="1">Terra</option>
  <option value="2">Bella </option>
  <option value="3">Boca</option>
</select>


<span id="stylediv">Text to display here</span>