Html div in select option selected

How can I show a hidden div when a select option is selected in JavaScript?

Showing and hiding elements is a common task in JavaScript. It can be used to create dynamic user interfaces, where the content changes depending on the user’s input or interaction with the page. One way of doing this is to show a hidden div when a select option is selected. This article will guide you through how to do this using JavaScript.

A Boolean attribute is the one that was chosen. It indicates that a choice should be preselected when the page loads if it is present. In the drop-down list, the pre-selected option will be shown first.

To show a hidden div when a select option is selected, you can set the value “style.display” to block.

Example

In the following example we are using the visibility property to display and hide the div.

   #tutorial Select: Hide display  
Tutorialspoint
    

When the script gets executed, it will generate an output consisting of a drop-down list on the webpage. When the user selects the display option, the div content will get displayed on the browser. The other option was hide, which acts as reverse to the display option.

Example

Considering the following example where we are running script to display hidden div.

   #hidden_div Choose: DisAgree Agree  
Welcome
 function showDiv(divId, element)  

On running the above script, the web-browser displays, the drop-down list. If the user selects «agree,» the text «welcome,» which is a hidden div, is displayed. Whereas, the other option, «disagree,» displays nothing.

Example

Let’s look at the other example where the hidden div is shown as a textbox based on a dropdown list.

    function Div() Do you have Passport? No Yes  
Passport Number: 
   

When the script gets executed, it will generate an output consisting of a drop-down list on the webbrowser. When the user selects the «yes» option, it will generate an input textbox for user input; if he selects «no,» it remains unchanged.

Источник

How TO — Custom Select Box

Learn how to create custom select boxes with CSS and JavaScript.

Custom Select Box

Create a Custom Select Menu

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The container must be positioned relative: */
.custom-select position: relative;
font-family: Arial;
>

.custom-select select display: none; /*hide original SELECT element: */
>

.select-selected background-color: DodgerBlue;
>

/* Style the arrow inside the select element: */
.select-selected:after position: absolute;
content: «»;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
>

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after border-color: transparent transparent #fff transparent;
top: 7px;
>

/* style the items (options), including the selected item: */
.select-items div,.select-selected color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
>

/* Style items (options): */
.select-items position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
>

/* Hide the items when the select box is closed: */
.select-hide display: none;
>

.select-items div:hover, .same-as-selected background-color: rgba(0, 0, 0, 0.1);
>

Step 3) Add JavaScript:

Example

var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class «custom-select»: */
x = document.getElementsByClassName(«custom-select»);
l = x.length;
for (i = 0; i < l; i++) selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/* For each element, create a new DIV that will act as the selected item: */
a = document.createElement(«DIV»);
a.setAttribute(«class», «select-selected»);
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»);
for (j = 1; j < ll; j++) /* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener(«click», function(e) /* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName(«select»)[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) if (s.options[i].innerHTML == this.innerHTML) s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
yl = y.length;
for (k = 0; k < yl; k++) y[k].removeAttribute("class");
>
this.setAttribute(«class», «same-as-selected»);
break;
>
>
h.click();
>);
b.appendChild(c);
>
x[i].appendChild(b);
a.addEventListener(«click», function(e) /* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»);
>);
>

function closeAllSelect(elmnt) /* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName(«select-items»);
y = document.getElementsByClassName(«select-selected»);
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) if (elmnt == y[i]) arrNo.push(i)
> else y[i].classList.remove(«select-arrow-active»);
>
>
for (i = 0; i < xl; i++) if (arrNo.indexOf(i)) x[i].classList.add("select-hide");
>
>
>

/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener(«click», closeAllSelect);

Источник

Show / Hide div based on dropdown selected using jQuery

If you want to hide/show div on dropdown selected, use the jQuery hide() and show(). Before you perform hide or show div on dropdown selection, you need to hide them first using CSS display:none .

The display of the div dynamically happen based on the click of the selected dropdown option. A hidden div displays and the CSS property display:block added to the displayed div element.

How to hide and show div or section banes on dropdown selected using jQuery

Follow the below sample example for show/hide div when you select dropdown options.

HTML

Script

Style

 .myDiv < display:none; padding:10px; margin-top:20px; >#showOne < border:1px solid red; >#showTwo < border:1px solid green; >#showThree 

Output

There are three options given in the select box to select. You have to select the option to display the relevant div element. To show/hide div on the select option selected, the dynamic changes can handle by using some jQuery script as given in the example above.

In addition to all these, don’t forget to add the CSS property display:none to all the div’s which you want to show/hide and display only on select of the options.

Popular Posts

• Show / Hide div based on dropdown selected using jQuery
• Infinite Scrolling on PHP website using jQuery and Ajax with example
• How to Convert MySQL Data to JSON using PHP
• Custom Authentication Login And Registration Using Laravel 8
• Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
• Slick Slider Basic With Example
• How to change date format in PHP?
• JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
• Adaptive Height In Slick Slider
• php in_array check for multiple values
• Slick Slider Center Mode With Example
• Image Lazy loading Using Slick Slider
• How to Scroll to an Element with Vue 3 and ?
• Calculate Subtotal On Quantity Increment in Woocommerce Single Product Page
• Create Sortable, Drag And Drop Multi Level Menu With Jquery

Источник

Show / Hide div based on dropdown selected using jQuery

If you want to hide/show div on dropdown selected, use the jQuery hide() and show(). Before you perform hide or show div on dropdown selection, you need to hide them first using CSS display:none .

The display of the div dynamically happen based on the click of the selected dropdown option. A hidden div displays and the CSS property display:block added to the displayed div element.

How to hide and show div or section banes on dropdown selected using jQuery

Follow the below sample example for show/hide div when you select dropdown options.

HTML

Script

Style

 .myDiv < display:none; padding:10px; margin-top:20px; >#showOne < border:1px solid red; >#showTwo < border:1px solid green; >#showThree 

Output

There are three options given in the select box to select. You have to select the option to display the relevant div element. To show/hide div on the select option selected, the dynamic changes can handle by using some jQuery script as given in the example above.

In addition to all these, don’t forget to add the CSS property display:none to all the div’s which you want to show/hide and display only on select of the options.

Popular Posts

• Show / Hide div based on dropdown selected using jQuery
• Infinite Scrolling on PHP website using jQuery and Ajax with example
• How to Convert MySQL Data to JSON using PHP
• Custom Authentication Login And Registration Using Laravel 8
• Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
• Slick Slider Basic With Example
• How to change date format in PHP?
• JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
• Adaptive Height In Slick Slider
• php in_array check for multiple values
• Slick Slider Center Mode With Example
• Image Lazy loading Using Slick Slider
• How to Scroll to an Element with Vue 3 and ?
• Calculate Subtotal On Quantity Increment in Woocommerce Single Product Page
• Create Sortable, Drag And Drop Multi Level Menu With Jquery

Источник

How to show a hidden div when a select option is selected with JavaScript?

Sometimes, we want to show a hidden div when a select option is selected with JavaScript.

In this article, we’ll look at how to show a hidden div when a select option is selected with JavaScript.

How to show a hidden div when a select option is selected with JavaScript?

To show a hidden div when a select option is selected with JavaScript, we can listen to the change event of the select element to get the option selected.

Then we can set the display CSS property of the element we want to show or hide according to the selected value.

No Yes  
Hello hidden content
 

to add a select element and a div to show or hide according to the selected drop down value.

const select = document.getElementById('select') const div = document.querySelector('div') select.addEventListener('change', (e) => < if (+e.target.value === 1) < div.style.display = 'block' >else < div.style.display = 'none' >>) 

to show or hide the div when we select a new value in the drop down.

Then we use document.getElementById to select each element.

Next, we call select.addEventListener with ‘change’ and the change event listener to add a change event listener.

In the event listener, we check if e.target.value is 1 after it’s converted to a number.

If that’s true , we set div.style.display to ‘block’ to display it.

Otherwise, we set display.style.display to hide it.

Conclusion

To show a hidden div when a select option is selected with JavaScript, we can listen to the change event of the select element to get the option selected.

Then we can set the display CSS property of the element we want to show or hide according to the selected value.

Источник