Question

首先，我想说我正在尝试修改现有代码，而我对jquery并不熟悉，因此脚本部分可能还很遥远。

我将有一个包含整数值的选择菜单，当选择它们时，我想在范围ID“ 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>

Answer 1

为此$(".stylediv")更改此$("#stylediv")，因为.stylediv表示所有具有类stylediv的元素，并且#stylediv意味着所有具有ID stylediv的元素

在您的情况下，您有一个具有此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>

Answer 2

在jQuery中，＃用于通过id和进行选择。用于按班级选择。我还建议您在窗口加载时运行函数，以便显示选择的初始值。

<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>
<script> 
$(window).load(function(){
 styleselect();
})
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

2 个答案: