In a dropdown list, I would like to be able to display custom text based on the choice made in the list.
In my example below, I manage to display the selected value in the dropdown.
But for example, instead of displaying "var1", I would like to display more text, for example :
Many thanks in advance !
<!DOCTYPE html>
<body>
<h1 style="color: green">
Que recherchez vous ?
</h1>
<p>
<select id="select1">
<option value="var1">Variable 1</option>
<option value="var2">Variable 2</option>
<option value="var3">Variable 3</option>
</select>
</p>
<button onclick="getOption()"> Check option </button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
output = selectElement.value;
document.querySelector('.output').textContent = output;
}
</script>
<p> The value of the option selected is:
<span class="output"></span>
</p>
</body>
</html>
The js code:
const longTexts = ["var1 is built with ... (long text)", "var2 is important because... (long text)", "var3 is ... (long text)"];
function getOption() {
const select = document.querySelector('#recherche');
const selectedText = longTexts[select.selectedIndex];
document.querySelector('.output').textContent = selectedText;
}
you can try something like this ,you can use Switch-case control flow
<body>
<h1 style="color: green">
Que recherchez vous ?
</h1>
<p>
<select id="select1">
<option value="var1">Variable 1</option>
<option value="var2">Variable 2</option>
<option value="var3">Variable 3</option>
</select>
</p>
<button onclick="getOption()"> Check option </button>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#select1');
let selectedOption = '';
output = selectElement.value;
switch(output) {
case "var1":
selectedOption = "Variable 1 is built with ... (long text)";
break;
case "var2":
selectedOption = "Variable 2 is important because... (long text)";
break;
default:
selectedOption = "default selected";
} document.querySelector('.output').textContent = output + selectedOption;
}
</script>
<p> The value of the option selected is:
<span class="output"></span>
</p>
</body>
Based on your question, you want certain text to be displayed on .output based on the value of <select>
What you need to do then is:
<select> to change its valueconst outputDiv = document.querySelector('.output')
// Listen for <select> to change value
document.getElementById('select1').addEventListener('input', (evt) => {
// Get the selected value
const value = evt.target.value
// Do the conditional
switch (value) {
case 'var1':
// Set the text
outputDiv.textContent = 'something';
break;
case 'var2':
outputDiv.textContent = 'something else';
break;
default:
console.log("This shouldn't happen but it did lol");
}
})
Now if you also need to get the current value on first load, you can do:
document.getElementById('select1').value
You can also use the event change but it's somewhat different. Here's a relevant question for that: Difference between "change" and "input" event for an `input` element
Didn't notice you have a button for manually checking.
The answer will still be similar. What you then instead need to do is just create a function that your button will call with similar content as above answer.
function getOption() {
// Get current value
const value = document.getElementById('select1').value
// Do the conditional
switch (value) {
case 'var1':
// Set the text
outputDiv.innerHTML = '<b>This is in bold text</b><br>';
break;
case 'var2':
outputDiv.innerHTML = '<span>something else but not bold</span><br>';
break;
default:
console.log("This shouldn't happen but it did lol");
}
}