जब कोई चयनित विकल्प चुना जाता है तो एक छिपा हुआ div दिखाने के लिए, आप “style.display” मान को ब्लॉक करने के लिए सेट कर सकते हैं।
उदाहरण
निम्नलिखित कोड है -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#hideValuesOnSelect {
display: none;
}
</style>
<body>
<select onchange="displayDivDemo('hideValuesOnSelect', this)">
<option value="0">Java</option>
<option value="1">Javascript</option>
</select>
<div id="hideValuesOnSelect">This is the Javascript</div>
</body>
<script>
function displayDivDemo(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
}
</script>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम anyName.html(index.html) को सेव करें और फ़ाइल पर राइट क्लिक करें। वीएस कोड एडिटर में "ओपन विद लाइव सर्वर" विकल्प चुनें।
यह निम्नलिखित आउटपुट देगा -
जब भी आप दूसरा विकल्प मान (जावास्क्रिप्ट) चुनते हैं, तो हिडन डिव दिखाई देगा।
आउटपुट
यह निम्नलिखित आउटपुट देगा -
