Question

我想根据选择的选项显示块，其他剩余部分应该隐藏。但是我没有得到所需的输出。仅显示了选项，但未显示它们的相关div内容.Java语言新手。处理这个（事情？ <！DOCTYPE html> <头> <身体> <选择>

单击A

B被点击

C被点击

D被点击

Answer 1

您可以尝试以下类似方法，

对于Select，您应该使用onchange事件，不需要为每个选项添加它，而只需选择select。
对于HTML元素，Id应该是唯一的，但名称可以相同。切尔here

在此示例中，

使用class selector隐藏了所有div的负载，所有分配了类名.disp的元素都隐藏了。
为Select分配了onchange事件，每次选项更改时都会调用。
将this对象传递给事件，然后可以从yesNocheck函数内部获取值。
基于该值，可以提供简单的逻辑和特定的div。
querySelectorAll将选择与过滤器匹配的所有元素，在这种情况下，此元素用于隐藏其他Div's

function yesNocheck(thisObj) {

var val = thisObj.value;

console.log(val);

document.querySelectorAll('.disp').forEach(function(element) {
    element.style.display = "none";
});

document.getElementById("display"+ val.toUpperCase() +"").style.display = 'block';

}

.disp
{
  display: none;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select onchange="yesNocheck(this)">
  <option name="b" id="a" value="a">A</option>
  <option name="b" id="b" value="b">B</option>
  <option name="b" id="c" value="c">C</option>
  <option name="b" id="d" value="d">D</option>
</select>
    <div id="displayA" class="disp">
        A is clicked
    </div>

    <div id="displayB" class="disp">
        B is clicked
    </div>

    <div id="displayC" class="disp">
        C is clicked
    </div>

    <div id="displayD" class="disp">
        D is clicked
    </div>
        
       
</body>

</html>

根据javascript

1 个答案: