Display div if a specific select option value is selected - javascript

I am trying to display a div if user select a specific option value from a select drop down list.
Example:
The select drop down list consist of dynamic names fetched from the database and also one static or permanent name at the bottom of the list called "Admin"
If user select an option that's not "Admin", a div containing certain form element is shown else if the user select "Admin" that div remain hidden
Here is my code:
Javascript -
<script language="javascript">
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue != 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
HTML -
<select id="getFname" onchange="admSelectCheck(this.select);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Would be glad getting help with this.

Using this.select is incorrect.
Here is the correct code:
HTML
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
JS
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
See the demo on JSFiddle.

I think you need like this
Just Change this line:
JS
admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
And also in HTML
onchange="admSelectCheck(this);"
see Demo

try this:
JS:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = nameSelect.value;
if(admOptionValue != 0){
nameSelect.style.display = "";
}
else{
nameSelect.style.display = "none";
}
}
else{
nameSelect.style.display = "none";
}
}
HTML:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>

Try
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
And
function admSelectCheck(nameSelect)
{
var val = nameSelect.options[nameSelect.selectedIndex].value;
document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}
Demo: Fiddle

You can attach change event handler on body load event and hide/unhide <div> based on selection:
HTML
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Put the following code in Head tag:
<script type="text/javascript">
function onload() {
document.getElementById("getFname").onchange = function (e) {
if (this.value == 0) {
document.getElementById("admDivCheck").style.display="";
} else {
document.getElementById("admDivCheck").style.display="none";
}
};
}
</script>
Call the onload function in body:
<body onload="onload()">
jsfiddle demo

Change this.select to this:
<select id="getFname" onchange="admSelectCheck(this);">
Then it should work okay. Also if you have jQuery you can simply do:
$("#getFname").change(function() {
var val = $(this).text();
if (val != "Admin") {
$("#div").show();
}
});
Will supply a pure JS function too.

<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$("#getFname").on("change",function(){"0"===$(this).val()?$("#admDivCheck").show():$("#admDivCheck").hide()});
</script>
Demo: https://jsfiddle.net/kingtaherkings/swzmxkej/

Related

Activate TextBox if another option is selected in PHP

I have two dropdown lists and I want for example, if value=fetch selected then show second dropdown but it doesn't work.
I have tried with call external PHP file but I was stuck again.
I think that the problem is when I call the on change method but I don't know what to type.
function action(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'Fetch'){
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if(value == 'Count'){
document.getElementById("student_list").style.display = "block";
}
if(value == 'Percentage'){
document.getElementById("subject_list").style.display = "block";
}
}
<body>
<div class="main_container">
<form method="post">
<select name="action" id ="fetch" onchange="action(this.value);">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;"> <!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>
You cannot use a function named "action" please see https://stackoverflow.com/a/37590405/5391965
You should retrieve your values within the function instead of passing it in parameters like so :
function displayStudentList(dropdown) {
let subject = document.getElementById("subject_list").value;
if (subject === 'Fetch') {
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if (subject === 'Count') {
document.getElementById("student_list").style.display = "block";
}
if (subject === 'Percentage') {
document.getElementById("subject_list").style.display = "block";
}
}
<div class="main_container">
<form method="post">
<select name="action" id="subject_list" onchange="displayStudentList()">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;">
<!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>

show/hide section in wordpress with select values

I use Divi Theme in Wordpress.
I have sections that I gave IDs.
I have a select, and for each option value I use the sections IDs.
I want show one section by changing the select option and hide the other section that is showed.
Here is the select :
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
Here is the javascript :
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
if (x.style === "display:none;") {
x.style = "display:block";
} else {
x.style = "display:none;";
}
}
</script>
Could you tell my why it's not working ?
thanks
Caroline
In your code, you are trying to style a string value x.style
If we see closely var x = document.getElementById("mySelect").value; this is returning a string value not an html element. But yes we can use this string value to get html element and make it visible and hide other.
function myFunction() {
var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "none") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "none";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
<div id="section2020" class='section' style='display:none'><h1>2020</h1></div>
<div id="section2019" class='section' style='display:none'><h1>2019</h1></div>
<div id="section2018" class='section' style='display:none'><h1>2018</h1></div>
<div id="section2017" class='section' style='display:none'><h1>2017</h1></div>
<div id="section2016" class='section' style='display:none'><h1>2016</h1></div>
<div id="section2015" class='section' style='display:none'><h1>2015</h1></div>
So thank you so much #Dupinder Singh. After playing with the code, I got it to work on my DIVI theme.
However, since you can't put in-line CSS styles on a Section in DIVI, I did the following. I went under each section and under the Advanced Tab -> Custom CSS -> Main Content = display: none;
Then since each section appeared like so I changed the javascript to the following:
<script>
function myFunction() {
var selectElement = document.getElementById("serviceoptions");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
</script>
The following was my HTML for the Selection Menu:
<p style="text-align: center;">
<Select id="serviceoptions" onchange="myFunction()">
<option value="">Choose a Service</option>
<option value="behavior">Behavior Resources</option>
<option value="case">Case Management Resources</option>
<option value="education">Education Resources</option>
<option value="speceducation">Specialized Education Resources</option>
<option value="afterschool">After School Programs</option>
<option value="kidhealth">Children's Health Resources</option>
<option value="kidoralhealth">Children's Oral Health Resources</option>
<option value="homevisit">Home Visiting Resources</option>
<option value="nutrition">Nutrition Resources</option>
<option value="parent">Parent Resources</option>
<option value="transpo">Transportation Resources</option>
<option value="kidcare">Child Care Resources</option>
</select>
</p>
You can see it in action here: first1thousand.com/resources

How to get options element by id and output text

Could someone help me with this little javascript. I want the rersult to show in NA only when option value 2 is selected. I want 11" to show will show. Need a simple script to output custom text based on value text. I do know i have value="2" listed twice. I cannot use the value field.
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if(document.getElementById("test").value == "11") {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
You can check the text of the option like
function myFunction() {
var el = document.getElementById("sizing-change");
if (el.options[el.selectedIndex].text.trim() == '11"') {
document.getElementById("finalsize").innerHTML = "Size: 11";
} else {
document.getElementById("finalsize").innerHTML = "NA";
}
}
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
If you can alter the value field of option to different values(which you should) then you can try this:
<select id="sizing-change" onchange="myFunction()">
<option value="12">12</option>
<option value="11" id="test">11</option>
</select>
<div class="sizefinal">Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if (document.getElementById("sizing-change").value == 11) {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
Demo: http://jsfiddle.net/GCu2D/784/
var finalsize = document.querySelector('#finalsize');
var sizingChange = document.querySelector('#sizing-change')
var testOption = sizingChange.querySelector('#test');
myFunction(sizingChange);
function myFunction(element) {
var checked = element.querySelector(':checked');
if (checked == testOption) {
finalsize.innerHTML = "Size: " + element.querySelector(':checked').text;
} else {
finalsize.innerHTML = 'NA';
}
}
<select id="sizing-change" onchange="myFunction(this)">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>

Does the JavaScript onclick event not work on <select> <option>'s?

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down">
<option value="choose" onclick="hideOther();">Please choose</option>
<option value="Allure" onclick="hideOther();">Allure</option>
<option value="Elle" onclick="hideOther();">Elle</option>
<option value="In-Style" onclick="hideOther();">In-Style</option>
<option value="other" id="otherOption" onclick="showOther();">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />
Add this function to your JS:
function showHideOther(){
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
And change your select element like this:
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
function showHideOther() {
if (document.getElementById('drop_down').value == 'other') {
showOther();
} else {
hideOther();
}
}
function showOther() {
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
function hideOther() {
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
#other {
display: none;
}
#otherBr {
display: none;
}
<select name="" id="drop_down" onchange="showHideOther();">
<option value="choose">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle">Elle</option>
<option value="In-Style">In-Style</option>
<option value="other">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />
An answer with JS only, not jQuery:
onclick event in option tag is just recognized by Firefox. If you need a solution that works on all browsers such as IE or Chrome you can use onchange event on your "Select" element.
HTML :
<select name="" id="drop_down" onchange="showHideOther(this.value);">
<option value="choose" ">Please choose</option>
<option value="Allure">Allure</option>
<option value="Elle" >Elle</option>
<option value="In-Style" >In-Style</option>
<option value="other" id="otherOption">Other</option>
</select>
JS defined in the html head section as script:
function showHideOther(value){
alert(value);
if (value==='other'){
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
}
else{
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
}
}
JSFiddle sample working fine: http://jsfiddle.net/amontellano/gLML3/14/
I hope it helps.
DEMO
var dropdown = document.getElementById('drop_down');
dropdown.onchange = function() {
var selected = dropdown.options[dropdown.selectedIndex].value;
switch(selected) {
case 'other':
document.getElementById('other').value = "";
document.getElementById('other').style.display = 'block';
document.getElementById('otherBR').style.display = 'block';
break;
default:
document.getElementById('other').style.display = 'none';
document.getElementById('otherBR').style.display = 'none';
break;
}
}
just add these function to your code:
$('#drop_down').on('change', function(){
($(this).val() == 'other') ? showOther() : hideOther();
});
se here: http://jsfiddle.net/gLML3/7/

dropdown option and action

I have a drop down and inside that i have options. On clicking the option it must display fields respectively.
Like for
option1 == one text box
option2 == two text box and so on...
<select id="dropdown">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..
If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.
Demo
Html:
<select id="dropdown">
<option value="A" data-number="1">option1</option>
<option value="B" data-number="2">option2</option>
<option value="C" data-number="3">option3</option>
<option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>
Javascript:
$('#dropdown').change(function(){
$('#textBoxContainer').empty();
var number = $(this).find('option:selected').attr('data-number');
for (var i = 0; i < number; i++){
$('#textBoxContainer').append('<input type="text"/>');
}
});
<select id="dropdown" onChange="showHide()">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
function showHide()
{
hideAll();
var val = document.getElementById("dropdown").value;
if(val == "A")
document.getElementById("firstTextBoxId").style.display = 'block';
else if(val == "B")
document.getElementById("secondTextBoxId").style.display = 'block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'block';
}
function hideAll()
{
document.getElementById("firstTextBoxId").style.display = 'none';
document.getElementById("secondTextBoxId").style.display = 'none';
document.getElementById("thirdTextBoxId").style.display = 'none';
document.getElementById("fourthTextBoxId").style.display = 'none';
}

Categories