根据所选选项显示HTML
根据所选选项显示HTML
提问于 2018-07-21 05:17:56
首先，我要说的是，我正在尝试修改现有的代码，而且我对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>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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-21 05:22:29
更改此$("#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>
Stack Overflow用户
发布于 2018-07-21 05:53:44
在jQuery中，#用于根据id和进行选择。用于按类选择。我还建议您在窗口加载时运行您的函数，以便显示select的初始值。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51450486
复制相关文章
相似问题