How to change position of element when onclick using jquery?

How to change position of element when onclick using jquery? - javascript

I have two divs, .div_data and .div_update where
<select name=change_placement>
<option value=0>Top</option>
<option value=1>Bottom</option>
</select>
<div class='div_data'>Data Data</div>
<div class='div_update'>
<form name=stuff>
<input type=text>
</form>
</div>
How do I get .div_update to precede .div_data when clicking on select[name=change_placement]?

I put an id to your select and also added an option 'Select' to your dropdown select. I am assuming that you want the input text box to go above the other div when you choose 'Top'.
$('#change_placement').on('change', function() {
var option = $(this).val();
if(option == 0) {
$('.div_update').insertBefore($('.div_data'));
} else {
$('.div_update').insertAfter($('.div_data'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='change_placement' id='change_placement'>
<option value=''>Select</option>
<option value='0'>Top</option>
<option value='1'>Bottom</option>
</select>
<div class='div_data'>
Data
Data
</div>
<div class='div_update'>
<form name=stuff>
<input type=text>
</form>
</div>

Make use of insertBefore and insertAfter functions
$(function(){
$('select').on('change', function(){
var value = $(this).val();
if(value == "1") {
$('.div_update').insertAfter('.div_data');
} else {
$('.div_update').insertBefore('.div_data');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name=change_placement>
<option value="0">Top</option>
<option value="1">Bottom</option>
</select>
<div class='div_data'>
Data
Data
</div>
<div class='div_update'>
<form name=stuff>
<input type=text>
</form>
</div>
emphasized text

Quick play fixed issue:
if(update_ticket_placement == 0) {
var myparent = $('div.div_update');
var parentparent = $('div.div_data');
myparent.detach().prependTo(parentparent );
}

You can use .insertAfter() to inserting targer element after specific element.
$("select").change(function(){
var value = $(this).val();
$(".div_update").insertAfter(value == 1 ? ".div_data" : this);
});
$("select").change(function(){
$(".div_update").insertAfter($(this).val() == 1 ? ".div_data" : this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name=change_placement>
<option value=0>Top</option>
<option value=1>Bottom</option>
</select>
<div class='div_update'>
<form name=stuff>
<input type=text>
</form>
</div>
<div class='div_data'>Data Data</div>

Related

How to visible div by class by using js? [duplicate]

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';
})

How to select dropdown by inserting value in the text box

Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date

Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/

<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})

check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>

Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>

Run Javascript if Select values =

I make a script to calculate number.
But i want this script to be work only when user select dropdown to text2 (value=5)
But this script is not working (nothing happened when run the script) :(
Can anyone help or suggest me getting started with this script Please.
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
Calculate<br>
<input type="text" id="input">
<input type="text" disabled="disabled" id="result">
<script>
function copy() {
if (document.getElementById("stt").value == "5") {
$(document).ready(function(){
$("#input").keyup(function(){
var val1 = +$("#input").val();
$("#result").val(val1*79);
});
});
}
}
</script>

**EDIT**: Changed $("#input").on("change" with $("#input").on("keypress".
New working JSFiddle: http://jsfiddle.net/L69dp/1/
HTML Code:
<select id="stt">
<option value="">
Select
</option>
<option value="8">
text1
</option>
<option value="5">
text2
</option>
<option value="4">
text3
</option>
</select><br>
Calculate<br>
<form>
<input id="input" type="text"> <input disabled="true" id="result" type=
"text">
</form>
JS Code:
$(function() {
function calculate() {
var sttval = $("#stt").val();
if (sttval == "5") {
var val1 = $("#input").val();
$("#result").val(val1 * 79);
} else {
$("#result").val("");
}
}
$("#stt").on("change", function() {
calculate();
});
$("#input").on("keypress", function() {
calculate();
});}());

You need to add a reference to the jquery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Put this before your existing script block.
Also, you do not need $(document).ready(function(){} inside the copy() function.

<head>
<script>
var value;
function copy() {
value=document.getElementById("stt").value; //get the value of select everytime it change the value
}
function dd()
{
if(value=="5")//if the value is 5 do the code below
{
var val1= document.getElementById('input');
document.getElementById('result').value=val1.value*79;
}
}
</script>
</head>
<body >
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
<input type="text" id="input" oninput="dd()" >
<input type="text" disabled="disabled" id="result">
</body>
</html>

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

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';
})

How to show form input fields based on select value?

I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks

You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌

Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>

You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;

I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>

$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});

Develop Reference

JavaScript is the programming language of the Web.

How to change position of element when onclick using jquery? - javascript

Quick play fixed issue: if(update_ticket_placement == 0) { var myparent = $('div.div_update'); var parentparent = $('div.div_data'); myparent.detach().prependTo(parentparent ); }

Related

How to visible div by class by using js? [duplicate]

How to select dropdown by inserting value in the text box

Run Javascript if Select values =

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

How to show form input fields based on select value?

Categories

Resources