Develop Reference

append() in jquery not woring

I am new to jquery and ajax. I really need you help.
I have two select box, one dynamically add options to a select when the first select box is checked. I used ajax to dynamically get those values. I am getting values correctly from database. But when I try to append these options inside second select box it is not working. My code is below
$(document).ready(function() {
$("#categories").change(function() {
var categoryId = $("#categories").val();
//alert(categoryId);
if(categoryId == 2) {
$.ajax({
url: "<?= base_url();?>Web/getRateType",
method: "POST",
dataType: "json",
success:function(data) {
//alert(data[0].status);
$("#rate_container").css('display', 'block');
$("#expected_salary_container").css('display', 'none');
$("#rate_categories").empty();
// var str = '<label>Rate*</label></br>';
//str += '<select name="rate_categories" style="font-size:15px" id="rate_categories"><option value="0">Select</option>';
var str = '';
$.each(data, function(key, value) {
//alert(value['rate_id']);
str +='<option value="'+ value['rate_id'] +'">'+ value['rate_cat_name'] +'</option>';
});
alert(str);
//str += '</select>';
var x = $("#rate_categories").append(str);
if(x){
alert(x);
}
}
});//$("#rate_categories").append('<option value="'+ value.rate_id +'">'+ value.rate_cat_name +'</option>');
}
else if (categoryId == 1) {
document.getElementById("expected_salary_container").style.display = "block";
document.getElementById("rate_container").style.display = "none";
}
else{
document.getElementById("expected_salary_container").style.display = "none";
document.getElementById("rate_container").style.display = "none";
}
});
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label>Job Type*</label>
<select name="categories" id="categories">
<option value="0">Select</option>
<?php foreach($categories as $key => $value) { ?>
<option value="<?php echo $value['type_id']; ?>"><?php echo $value['cat_name']; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label>Rate*</label>
<select id="rate_categories" name="rate_categories">
<option value="0">Select</option>
</select>
</div>
here alert(x) is working fine. but the html is not appending inside select box. could anybody please help
jQuery is referenced in the header:
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first. However please check the network tab JS file load.
You should put the references to the jquery scripts first.
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
Please use compatible new jquery CDN Url in above script tag.

Examine the code below and see if that works for you. I've changed the vanilla JS to jQuery. You may need to re-insert your php code back in.
$(document).ready(function() {
//Hide everything
$("#expected_salary_container, #rate_container").hide();
$("#categories").change(function() {
var categoryId = $("#categories").val();
console.log(categoryId);
//alert(categoryId);
if (categoryId == 2) {
let data = ["Item 1", "Item 2", "Item 3"];
str = "";
$.each(data, function(key, value) {
//alert(value['rate_id']);
str += '<option value="' + value + '">' + value + '</option>';
console.log(str);
});
var x = $("#rate_categories").append(str);
$("#expected_salary_container").hide();
$("#rate_container").show();
} else if (categoryId == 1) {
$("#expected_salary_container").show();
$("#rate_container").hide();
} else {
$("#expected_salary_container").hide();
$("#rate_container").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label>Job Type*</label>
<select name="categories" id="categories">
<option value="0">Select</option>
<option value="2">Cat 1</option>
<option value="1">Cat 2</option>
<option value="2">Cat 3</option>
</select>
</div>
</div>
<div id="rate_container">
<div class="form-group">
<label>Rate*</label>
<select id="rate_categories" name="rate_categories">
<option value="0">Select</option>
</select>
</div>
</div>
<div id="expected_salary_container">
<div class="form-group">
<label>Salary*</label>
<select id="rate_categories" name="rate_categories">
<option value="0">Select</option>
</select>
</div>
</div>

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>

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

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

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>