Javascript 根据所选选项显示HTML

首先，我要说的是，我正在尝试修改现有代码，而且我对jquery非常不熟悉，所以脚本部分可能已经过时了

我有一个选择菜单，里面有整数作为值，当它们被选择时，我想在span 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>

函数styleselect（）{
if（document.getElementById（'globalstyleselect'）。值==“3”）{
$（“.stylediv”）.html（'Boca Style'）；
} 
if（document.getElementById（'globalstyleselect'）。值==“2”）{
$（“.stylediv”）.html（'Bella Style'）；}
} 
if（document.getElementById（'globalstyleselect'）。值==“1”）{
$（“.stylediv”）.html（'Terra Style'）；
} 

Html:

泰拉
贝拉
博卡
要在此处显示的文本

将此

$（“.stylediv”）

更改为此

$（“#stylediv”）

，因为

。stylediv

指具有类

stylediv

的所有元素和

具有id
stylediv
的所有元素

在您的情况下，您有一个具有此id的div（
此处显示的文本
），因此必须使用id选择器

另外，我建议您不要重复同一个选择器太多次（这很容易出错）；取而代之的是把它放在一个变量中并使用它。。。并保持代码的一致性：如果使用jQuery，则使用jQuery获取所有元素（尽管这是一个首选项问题）

见下面的代码片段，js也得到了改进


函数样式选择（）{
var值=$（'#globalstyleselect'）.val（）；
var div=$（“#stylediv”）；
如果（值=“3”）{
div.html（“博卡风格”）；
}
如果（值=“2”）{
div.html（“贝拉风格”）；
}
如果（值=“1”）{
div.html（“Terra样式”）；
}
}

泰拉
贝拉
博卡
在jQuery中，此处显示的文本#用于按id和进行选择。用于按类选择。我还建议您在窗口加载时运行函数，以便显示select的初始值



泰拉
贝拉
博卡
要在此处显示的文本
$（窗口）。加载（函数（）{
styleselect（）；
})
函数styleselect（）{
if（document.getElementById（'globalstyleselect'）。值==“3”）{
$（“#stylediv”）.html（'Boca Style'）；
} 
if（document.getElementById（'globalstyleselect'）。值==“2”）{
$（“#stylediv”）.html（'Bella Style'）；}
} 
if（document.getElementById（'globalstyleselect'）。值==“1”）{
$（“#stylediv”）.html（'Terra Style'）；
} 
将
$（“.stylediv”）
更改为
$（“#stylediv”）
，因为stylediv是一个id。投票以键入方式结束。
<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>