We offer two solutions. One with JavaScript and the other with JQuery. To personalize the template, we consider Bootstrap.
We offer two solutions. One with JavaScript and the other with JQuery. To personalize the template, we consider Bootstrap.
Below you can see how it works:
You can download the code from my repository @Github or copy/paste it from JSFiddle.
First we show the JQuery example and then the JavaScript solution.
1. JQuery
The code comprises two files. The template select-option-jquery.html file reads:
<html>
<head>
<!-- bootstrap 5.2.3-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- style sheet -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container col-6 mt-4">
<!-- select option -->
<div>
<select class="form-select" id="list">
<option value="item1" selected>text 1</option>
<option value="item2">text 2</option>
<option value="item3">text 3</option>
</select>
</div>
<div class="p-2">
<div id="option-item1" class="option" style="display: block;">
Result 1 content
</div>
<div id="option-item2" class="option" >
Result 2 content
</div>
<div id="option-item3" class="option">
Result 3 content
</div>
</div>
</div>
<!-- bootstrap 5.2.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- jquery 3.6.3-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<!-- jquery select option -->
<script>
$(document).ready(function() {
var $my_list = $( '#list' );
var $my_option = $( '.option' );
$my_list.on( 'change', function ( e ) {
$my_option.hide();
$( '#option-' + this.value ).show(); //option-item1, option-item2, or option-item3
});
})
</script>
</body>
</html>
style.css file reads:
.option {
display: none;
}
2. JavaScript
The code comprises one file. The template select-option-js.html file reads:
<html>
<head>
<!-- bootstrap 5.2.3-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container col-6 mt-4">
<!-- select option -->
<div>
<select class="form-select" onchange="selectFunction(this)">
<option value="item1" selected>text 1</option>
<option value="item2" >text 2</option>
<option value="item3" >text 3</option>
</select>
</div>
<div class="p-2">
<div id="option-js-item1" class="option-js" style="display: block;">
Result 1 content
</div>
<div id="option-js-item2" class="option-js" style="display: none;">
Result 2 content
</div>
<div id="option-js-item3" class="option-js" style="display: none;">
Result 3 content
</div>
</div>
</div>
<!-- bootstrap 5.2.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- javascript select option -->
<script>
function selectFunction(selected){
var value = selected.value;
let option_item = document.getElementsByClassName('option-js')
for (var i = 0; i < option_item.length; i++ ) {
option_item[i].style.display = 'none';
}
document.getElementById('option-js-'+value).style.display = 'block';
}
</script>
</body>
</html>
Note: The Bootstrap files are not needed. They were included in the code to customize the template.
Views: 1 Github
Related Articles
Notifications
Receive the new articles in your email
Other Articles
Quantum models explained with athletics
stats con chris
Probability theory in the FIFA World Cup Qualifiers
stats con chris
Integral calculus to predict the future of Despacito
stats con chris
How to get into MIT. Invest in education
stats con chris
Football: bookmaker versus the stock market
stats con chris
