ey, I have 1 option in my selector list, and I want the div to not display with that one is selected. And when another is selected its back.
HTML:
function weg() {
var x = document.getElementById("wegwezen");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="myfun()">
<option value="behandeling" onclick="weg();" selected>Soort behandeling</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="wegwezen"><p><b>Behandeling:</b> <span id="pr"></span> €00,00</p></div>
So when "Soort behandeling" is selected the div needs to hide. But it just hides and then only comes back when I select that one again. Does someone know what causes this?
Pass this into your function call to weg(). Then remove the onclick on your first option as this is not needed.
In your weg function accept the this argument (here I called it elem) and use that to get the value of the selected item using elem.value. Based on the value, you can then choose whether show or hide the element using the element's .style property.
Lastly, as the 1st option is selected as default, you need to hide the div initially. You can do this by adding the style="display: none;" to your div.
See working example below:
function weg(elem) {
var x = document.getElementById("wegwezen");
if(elem.value !== "behandeling") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="weg(this)">
<option value="behandeling" selected>Soort behandeling</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="wegwezen" style="display: none;">
<p><b>Behandeling:</b> <span id="pr"></span> €00,00</p>
</div>
Use this one. I hope this will works for you.
function weg(elem) {
var x = document.getElementById("wegwezen");
if(elem.value == "behandeling"){
x.style.display = "none";
}
else{
if (x.style.display === "none") {
x.style.display = "block";
}
}
}
<select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="weg(this)">
<option value="behandeling" selected>Soort behandeling</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div id="wegwezen" style="display:none;"><p><b>Behandeling:</b> <span id="pr"></span> €00,00</p></div>
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo
Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>
Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})
I have a drop down box which once selected displays specific form elements, this works perfect but as soon as i add a div class to the elements (drop down boxes) the css class still shows even if that specific element isn't selected.
Is it possible to hide the css class along with the form element, below is my code.
Javascript
function check() {
var dropdown = document.getElementById("filtercriteria");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "page_name") {
document.getElementById("contains").style.display = "block";
document.getElementById("term").style.display = "block";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "none";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
HTML Drop down select Box
<select id="filtercriteria" onChange="check(this);" >
<option value="select">Select</option>
<option value="page_name">Page Name</option>
<option value="postcode">Postcode</option>
<option value="country">Country</option>
<option value="search_term">Search Term</option>
<option value="referrer">Refferer</option>
<option value="country">Country</option>
<option value="search_term">Search Term</option>
<option value="referrer">Referrer</option>
<option value="page_visits">Page Visits</option>
<option value="repeater">Repeater</option>
<option value="owner">Owner</option>
<option value="visitor_type">Visitor Type</option>
</select>
First Hidden Element with the Div Class that shows even if this option isn't selected.
<div id="pagename">
<div class="select-div">
<select id="contains" name="contains" display="none" class="hideme">
<option value="contains">contains</option>
<option value="exact">exact</option>
</select>
</div>
<input name="term" id="term" type="text" class="hideme" display='none' />
</div>
Any suggestions would be appreciated.
http://jsfiddle.net/isherwood/u2puF/2
I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?
try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo
Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>
Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>
take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})
I need some JavaScript code to validate the page. Here is the html,
<select id="sel">
<option value="0" selected="selected">Please select</option>
<option value="first">Link 1</option>
<option value="second">Link 2</option>
<option value="third">Link 3</option>
<option value="last">No Link</option>
</select>
<div class="sample" style="display:none;">Sample Text</div>
<input type="button" value="submit" class="inputclass" />
Need some JavaScript code,
when user clicks first or last option, show the div and hide the button
when user clicks any of the link, hide the div and show the button
P.S :
Options in the Select will generate dynamically from the database.
My page will only run in JavaScript, hence no need of Jquery.
Please help...
I think this is the code what you need:
The JS part:
function getSelection(e) {
var selection = document.getElementsByTagName("option");
var index=document.getElementById("sel").selectedIndex;
var text = document.getElementById("sample");
var button = document.getElementById("input");
var option=document.getElementById("sel").options;
if (option[index].value == "first" || option[index].value == "last") {
text.style.display = "block";
button.style.display = "none";
} else {
if (text.style.display != "none") {
text.style.display = "block";
button.style.display = "none";
}
else {
text.style.display = "none";
button.style.display = "block";
}
}
return false;
}
document.getElementById("input").onclick = function() { getSelection() };
And the HTML (i slightly modified the original one to have access more efficiently to html elements):
<select id="sel">
<option value="0" selected="selected">Please select</option>
<option value="first">Link 1</option>
<option value="second">Link 2</option>
<option value="third">Link 3</option>
<option value="last">No Link</option>
</select>
<div id="sample" style="display:none;">Sample Text</div>
<input type="button" value="submit" id="input"/>
...and the Fiddle :
http://jsfiddle.net/eaRwa/2/