Dynamic Dependent Select from dropdown using Jquery and Ajax and json file

Dynamic Dependent Select from dropdown using Jquery and Ajax and json file - javascript

I'm looking for some help with the code below,
I have this form that each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection. I want dropdown list 4 (select house) activate based on dropdown list 1 select country. so when the country selected. both state(2) and the house(4) will be activated and showing data. see screenshot below,
here is the HTML code
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
$('#house').html('<option value="">Select house</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#city', function(){
var city_id = $(this).val();
if(city_id != '')
{
load_json_data('house', city_id);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
<br />
<select name="house" id="house" class="form-control input-lg">
<option value="">Select house</option>
<br />
</div>
</body>
</html>

has been fixed. here is what i did>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
$('#house').html('<option value="">Select house</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id == 1)
{
load_json_data('house', 7);
}
else if(country_id == 2)
{
load_json_data('house', 8);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorialx</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON x</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
<br />
<select name="house" id="house" class="form-control input-lg">
<option value="">Select house</option>
<br />
</div>
</body>
</html>
i just changed the last function to
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id == 1)
{
load_json_data('house', 7);
}
else if(country_id == 2)
{
load_json_data('house', 8);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});

Related

Get the name of the object based on id in jquery

I am creating dynamic drop down menu. Based on the tutorial:
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('country_state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
</script>
User selects country and I want to get the name of the country which was selected. I get correct country id based on this var country_id = $(this).val(); but I need the name of it. I have tried to get this name using $("#country_id ").attr("name"); or $(this).attr("name"); but it doesn't work, please help me.

You can get the selected option text by using following code.
var country_name = $(this).find('option:selected').text();
Working Fiddle

SOLUTION:
$(this).children("option:selected").text();

how to Parsing multiple level JSON using jquery and ajax

I have this code example below working just fine with one level json file, not able to parse the data from multi level jason file.
so i'm trying to make this code work with the json file located on the link below, any help will be appreciated.
https://raw.githubusercontent.com/ahammoudi/jason_data/master/jsoncountry2.json
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/json_country.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
</script>

How to make one dropdown invisible or display:none when the other dropdown is on a certain selection?

I have 2 dropdowns - one for state, one for city. I want to make it so that, when the State dropdown is on the default selected value (--State--), the City dropdown is not even visible. But otherwise, as long as you select any of the states, the dropdown box will be there.
My current code is such that the 'City' options change depending on what 'State' you have selected. For reasons I don't understand, this JSFiddle isn't working, but it's working in Brackets. http://jsfiddle.net/a70zjg9p/4/
I just need help implementing:
if --State-- (default value) is selected, make City dropdown invisible
code on top of the code I already have.
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>

See the comments in the logic below for details on what it is doing at each step.
$(document).ready(function() {
//get the cities and detach them, since state presumably starts
//as --State--
var $citySelect = $("#layout_select");
var $cities = $citySelect.children().detach();
$("#column_select").on('change', function(e) {
//remove any cities that were previously re-attached
$cities.detach();
if (e.target.value === 'col0') {
//col0 is --State--, hide the cities
$citySelect.hide();
} else {
//find all the cities for the state and re-attach them
$citySelect.append(
$cities.filter(function(){ return this.value === e.target.value })
);
//show the cities
$citySelect.show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>

Check the selected value of the first select, if it is equal to col0, then hide the second select, if not, show it.
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
var addoptarr = [];
var citySelect = $("#layout_select");
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
citySelect.html(addoptarr.join(''))
//CHECK IF IS EQUAL TO 'col0'
if (this.value == "col0"){
citySelect.hide();
}else{
citySelect.show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px; display: none">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
As you can see if (this.value == ...) I'm using this because in the current context (the change trigger of the element), this is equivalent to the element, in this case, the select

Just check the text of the selected option of the select and hide #layout_select if it is equal to "-- State --".
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$('#layout_select').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''));
if($('#column_select').find(":selected").text()=="-- State --"){
$('#layout_select').hide();
} else {
$('#layout_select').show();
}
}).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>

if i have understood correctly, when the first option is selected (--State--), then the you need to hide the city dropdown...
in order to do that, you can use the following script:
http://jsfiddle.net/a70zjg9p/10/
$(document).ready(function() {
var $state = $("#column_select"),
$city = $("#layout_select");
$city.hide();
$state.on('change', function() {
if ($(this).val() == "col0") {
$city.hide();
} else {
$city.show();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;display:none">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>

This works
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut114</title>
<style type="text/css">
.Hide {
visibility: hidden;
}
</style>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var optarray = $("#layout_select").children('option').map(function () {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function () {
if ($('#column_select option:selected').text() != "-- State --") {
$("#layout_select").removeClass("Hide");
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}
else {
$("#layout_select").addClass("Hide");
}
}).change();
})
</script>
</head>
<body>
<select name="column_select" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col0">-- State --</option>
<option value="col1">Alabama</option>
<option value="col2">Florida</option>
<option value="col3">Texas</option>
</select>
<select name="layout_select" id="layout_select" style="height:35px;">
<option value="col0">-- City --</option>
<option value="col1">Montgomery</option>
<option value="col2">Orlando</option>
<option value="col3">Dallas</option>
</select>
</body>
</html>

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>

How to make one of the selected options in a drop-down list of an HTML form add a text input?

I have the following code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
I would like the form to show a new input text below this drop-down list when user chooses 'other' so that he/she can input his own city. The same way, if the user chooses back one of the existing cities in the drop-down list, the generated text input would disappear.

Add a input after the select and make it as display none
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
and inside the script tag
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
and you also should add Jquery in your html file before the above script tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
after combine the Html and Scripts your html file should look like this
<html>
<body>
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
</body>
</html>

Vadivel's fixed code:
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').attr('type','hidden');
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('type','text');
}
else
{
$('#city_value').attr('type','hidden');
}
});
});
</script>

$('#city').live('change', function() {
var selectedCity = $(this).val();
if(selectedCity == "other"){
$('#city').after('<input type="text" id="othercity" name="othercity">');
}else{
$('#othercity').remove():
}
});

JavaScript Code:
function otherOptionCall()
{
var e = document.getElementById("city");
var einput = document.getElementById("inputother");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 2)
{
einput.style.display="block";
}
else
{
einput.style.display="none";
}
}
Html code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="otherOptionCall()">Other...</option>
</select>
<input type="text" name="strother" id="inputother" style="display:none">

Use this code .
this is work fine.
You create this type use Jquery or JavaScript functions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id=" " style="">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1" onselect="city(this.val)">city1</option>
<option value="city2" onselect="city(this.val)">city2</option>
<option value="other" onselect="city(this.val)">Other...</option>
</select>
<input type="text" value="" id="city_value" placeholder="Enter City"/>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').hide();
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('required',true);
}
else
{
$('#city_value').attr('required',false);
}
});
});
</script> </body>

Develop Reference

JavaScript is the programming language of the Web.

Dynamic Dependent Select from dropdown using Jquery and Ajax and json file - javascript

Related

Get the name of the object based on id in jquery

how to Parsing multiple level JSON using jquery and ajax

How to make one dropdown invisible or display:none when the other dropdown is on a certain selection?

How to select dropdown by inserting value in the text box

How to make one of the selected options in a drop-down list of an HTML form add a text input?

Categories

Resources