Develop Reference

Is there a way to create an Other option with Javascript that causes a textbox to appear

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>

Making a div appear based on selection

First of all I have never really played with Javascript before, asides finding stuff that you clever types have created and then adding it to my sites.
I would like to show a div based on which option is selected in a drop down on the page.
I have Tariffs 1 - 4, the Tariff selected shows as t1, t2, t3 and t4 but the Divs are then not becoming visible.
I have tested the show / hide function of the div bit with a simple button and that worked, I just can't seem to make it pick up the variable to show the one which is selected.
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1"><p>Tariff 1</p></div>
<div class="t2"><p>Tariff 2</p></div>
<div class="t3"><p>Tariff 3</p></div>
<div class="t4"><p>Tariff 4</p></div>
</div>
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
if (item.style.display === 'none') {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
}
document.getElementById("select").addEventListener("change", showSelectedItem);
then the css for all the t1, t2... divs is
.t1
{display: none}
Thanks in advance, I suspect its something very obvious when you know what you are looking at.

Youe css styles wont be avaliable with item.style.display. Only the inline styles will be available with the above selector.
Logic
Make all nodes hidden initially with style="display:none" in HTML
On change, check the selected value.
Hide all nodes with class name which is not same as selected value.
If you want to hide the dropdown when the user selects an option, you could select the dropdown with document.getElementById("select") and set style.display = 'none'
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
const classes = ['t1', 't2', 't3', 't4'];
// Toggle visibility;
classes.forEach((classNode) => {
document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
});
// Hide the dropdown when the user selects an option
document.getElementById("select").style.display = "none";
}
document.getElementById("select").addEventListener("change", showSelectedItem);
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1" style="display: none;">
<p>Tariff 1</p>
</div>
<div class="t2" style="display: none;">
<p>Tariff 2</p>
</div>
<div class="t3" style="display: none;">
<p>Tariff 3</p>
</div>
<div class="t4" style="display: none;">
<p>Tariff 4</p>
</div>
</div>
If you want the css styles also to be reflfced with your script, you have to make use of Window.getComputedStyle() Reference
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
const selectedNode = document.querySelector(`.${item}`);
if (selectedNode) {
const displayValue = window.getComputedStyle(selectedNode).display;
const classes = ['t1', 't2', 't3', 't4'];
classes.forEach((classNode) => {
document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
});
// Hide the dropdown when the user selects an option
document.getElementById("select").style.display = "none";
}
}
document.getElementById("select").addEventListener("change", showSelectedItem);
.t1, .t2, .t3, .t4 {
display: none;
}
<div>
Value Selected: <span id="current"></span>
<br>
<br>
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="t1"> 1</option>
<option value="t2"> 2</option>
<option value="t3"> 3</option>
<option value="t4"> 4</option>
</select>
<div class="t1">
<p>Tariff 1</p>
</div>
<div class="t2">
<p>Tariff 2</p>
</div>
<div class="t3">
<p>Tariff 3</p>
</div>
<div class="t4">
<p>Tariff 4</p>
</div>
</div>

This is my solution here
1.) Add t-content class to you t1 - t4. This is easily to hide them in javascript later on.
.t-content {
display: none
}
<div class="t1 t-content"><p>Tariff 1</p></div>
<div class="t2 t-content"><p>Tariff 2</p></div>
<div class="t3 t-content"><p>Tariff 3</p></div>
<div class="t4 t-content"><p>Tariff 4</p></div>
2.) Slight modify your javascript code
function showSelectedItem() {
var item = document.getElementById("select").value;
document.getElementById("current").innerHTML = item;
// Select our target
var selected_div = document.getElementsByClassName(item)[0];
// Make all t-content hide first
var t_content = document.getElementsByClassName('t-content');
for (var i = 0; i < t_content.length; i++) {
t_content[i].style.display = 'none';
}
// Display our target div
selected_div.style.display = 'block';
}

You need to compare display property of div instead of value of dropdown.
var item = document.getElementById("select").value;
var dv = document.querySelector("."+item);
document.getElementById("current").innerHTML = item;
if (dv.style.display === 'none') {
dv.style.display = 'block';
} else {
dv.style.display = 'none';
}
https://jsfiddle.net/palak6041/9wj07ebv/17/
This will not hide other divs though you need to hide it with additional code
below example will hide other div, only selected div will be visible
https://jsfiddle.net/palak6041/9wj07ebv/25/

Show/hide div based on select option not working

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>

How to use if else statements in select form?

In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much

Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});

<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)

Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>

Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}

Javascript for showing and hiding a div based on select options

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/
​