We Keep Coding

on change selects not working well

I`m trying to make a simple select which generate the next select box...
but I cant seem to make it work
so, as you can see I'm making divs that have ID and parent, when I'm clicking on the first select the value generate the next select box with the divs and the parent value.
this is the jQuery, but for some reason I cant understand why its not working.
$(document).ready(function() {
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
i++;
t = '#ss' + i;
var pick = $(this).val();
$('#picks div').each(function() {
if ($(this).attr('parent') == pick) {
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');
}
$('#ss' + i).removeAttr('disabled');
})
console.log(t);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='picks'>
<div id='29' parent='26'>Pick1</div>
<div id='30' parent='29'>Pick11</div>
<div id='31' parent='26'>Pick</div>
</div>
<select id="ss1">
<option >First pick</option>
<option value="26">Angri</option>
<option value="27">lands</option>
<option value="28">tree</option>
</select>
<select id="ss2" disabled>
<option >Secound Pick</option>
</select>
<select id="ss3" disabled>
<option>Third Pick</option>
</select>
Here is a jsfiddle jsfiddle

Is this what you were shooting for? https://jsfiddle.net/6c5t8ort/
A couple things,
var t = '#ss' + i;
$(t).change(function() {
This only adds the change event to the first dropdown. If you give jQuery a selector (a class) if will add the event to all the elements though. Also the way you had your i variable set up means it would increment on every change.

The code below only attaches a change listener to the first ss ss1 so the change function is never called when you change ss2.
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
You can fix this by adding a class on each select and using $(".myClass").change(function() {
or you can just attach the listener to all selects $("select").change(function() {
Also the value for the option tag does not include a "parent" number. In this case it would be Pick, Pick1, or Pick11.
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');

Auto Filtering the json data based on the selected option using jquery is not working

I wrote the code for filtering the drop down list based on the selected option using jquery and the data is in json format and data is coming from database. Whenever I select the drop down list ,then it is not going inside the loop. Here is the code:
<select name="edept" id="Marque" class="form-control ">
<option value="">-- Select Department --</option>
<option value="General Physician" >General Physician</option>
<option value="Gynecologist">Gynecologist</option>
<option value="Surgeon">Surgeon</option>
<option value="Plastic Surgeon">Plastic Surgeon</option>
<option value="Pediatrician">Pediatrician</option>
<option value="Cardialogist">Cardialogist</option>
<option value="Dermetologist">Dermetologist</option>
<option value="Gastroenterologist">Gastroenterologist</option>
<option value="Dentist">Dentist</option>
<option value="Nephrology">Nephrology</option>
<option value="Neurology">Neurology</option>
<option value="Orthopaediatrics">Orthopaediatrics</option>
<option value="Cardiovascular">Cardiovascular</option>
<option value="Urology">Urology</option>
<option value="ENT">ENT</option>
<option value="Fertility">Fertility</option>
</select>
<select class="form-control" id="Serie" name="doctorname" required="required"></select> // this is the drop down where it filters based on the above drop down.
//Jquery code
var tabMarque = [];
var jsondata=<%=data%>; // this is the json data which is coming fro data base . json data is like :{"fertility":[["anviksha","anviksha"]],"ent":[["vishunadh","vishunadh"]} like key value pairs
console.log("hi");
console.log(jsondata);
$.each(jsondata, function(index, val) {
tabMarque[index] = val;
});
$('#Marque').change(function(event) {
// alert('Marque_change');
var datas = $(this).val();
// alert(datas);
console.log(datas);
var htmlOption = '<option value="0">Please select any one option</option>';
if (datas != '0') {
var itemsMarque = tabMarque[datas];// here it prints as undefined
// alert(itemsMarque);
// alert(JSON.stringify(itemsMarque));
console.log(itemsMarque);
console.log(JSON.stringify(itemsMarque));
$.each(itemsMarque, function(key, value) {
// alert("k=" + key + " v=" + JSON.stringify(value));
htmlOption += '<option value="' + value[key] +'">' + value[value] + '</option>';
});
}
$('#Serie').html(htmlOption);
});
});
Please help me out. Thanks in advance

The value of the option in the dropdown option should be same as key of JSON data.
Change
<option value="ENT">ENT</option>
to
<option value="ent">ENT</option>
1st Edit: To display the proper values in dropdown.
Replace
htmlOption += '<option value="' + value[key] +'">' + value[value] + '</option>';
with
htmlOption += '<option value="' + value[key] +'">' + value + '</option>';

Targeting Auto-Generated Fields with Incremented IDs (JavaScript)

I have a starting set of HTML fields with an Add More fields button. The user can add as many sets of fields as desired.
<input id="alpha1" name="alpha1" type="text">
<input id="beta1" name="beta1" type="text" style="display:none;">
<select id="select_box1" name="select_box1">
<option value="one">one</option>
<option value="two">two</option>
</select>
The Add More option triggers JS to creatate a new set of fields and increments the id and name by one. Code exerpted to streamline, but I can post all if requested.
// [...]
next = next + 1;
// [...]
var fieldtype_1 = '<input id="alpha' + next + '" name="alpha' + next + '">'
var fieldtype_2 = '<input id="beta' + next + '" name="beta' + next + '" style="display:none;">'
var select_options = `
<option value="one">one</option>
<option value="two">two</option>
`
var fieldtype_3 = '<select id="select_box' + next + '">' + select_options + '</select>'
The beta field needs to show/hide based on user input into a select box.
$(document).ready(function () {
toggleFields();
$("#select_box1").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#select_box1").val() == "two") {
$("#alpha1").hide();
$("#beta1").show();
}
else {
$("#alpha1").show();
$("#beta1").hide();
}
}
The above code works as intended for my default id(1) set of fields. However, I don't know how to approach targeting all the (unknown number) of additional fields the user could potentially add to this form.

add class activeSelect to every select, you are using. binding the event to the document will allow you to dynamically change the DOM and the event will be binded to every added element
$(document).ready(function () {
toggleFields(1);
$(document).on("change", ".activeSelect", function () {
toggleFields($(this).attr("id").substr(10));
});
});
function toggleFields(id) {
if ($("#select_box"+id).val() == "two") {
$("#alpha"+id).hide();
$("#beta"+id).show();
}
else {
$("#alpha"+id).show();
$("#beta"+id).hide();
}
}

jsFiddle
Use class as single identifier for fields group and wrap the group like this:
<div class="wrapper">
<input id="alpha1" class="item alpha" name="alpha1" type="text">
<input id="beta1" class="item beta" name="beta1" type="text" style="display:none;">
<select id="select_box1" name="select_box1" class="selectClass">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
Then toggle all elements of desired class in selected section:
$('.selectClass').on('change', function(){
var classToShow = $(this).val() == "two" ? "beta" : "alpha";
$(this).closest('.wrapper').find('.item').hide();
$(this).closest('.wrapper').find('.' + classToShow).show();
});

Make first option of select unselectable through arrow keys in Google Chrome

I have a select with options and when a user selects an option, it is removed from the select and displayed as a button. When the button is pressed, the option goes back to my select. Everything works fine with mouse click, but if we navigate with the arrows key, the user can select my first option which is "choose fruit". How do I make it unselectable? disabled="disabled" doesn't work. Here's a jsfiddle http://jsfiddle.net/gbjcw1wp/2/. To reproduce the problem, select a fruit, then press Up arrow key on your keyboard.
EDIT : ONLY HAPPENS IN GOOGLE CHROME.
Disabling arrow keys work, but i'd like another way of accomplishing this.
HTML:
<select id="combobox" onchange="cbchange();">
<option selected="selected">Choose Fruit</option>
<option value="apple">apple</option>
<option value="pear">pear</option>
<option value="orange">orange</option>
<option value="banana">banana</option>
</select>
<br>
<br>
<div id="buttons"></div>
Javascript :
var fieldnames = [];
var valuenames = [];
function sortComboBox() {
document.getElementById("combobox").remove(0);
var my_options = $("#combobox option");
my_options.sort(function (a, b) {
if (a.text.toUpperCase() > b.text.toUpperCase()) return 1;
if (a.text.toUpperCase() < b.text.toUpperCase()) return -1;
return 0;
});
$("#combobox").empty().append('<option>Choose Fruit</option>').append(my_options);
$('#combobox option:first-child').attr("selected", "selected");
}
function cbchange() {
var index = $('#combobox').get(0).selectedIndex;
var text = $('#combobox option:selected').text();
var selectedItem = $('#combobox').val();
$('#buttons').append('<table class="ui"><tr><td class="variable">' + text + '</td><td class="icon"><span id="' + selectedItem + '" class="icon ui" value="X" onclick="addOption(\'' + text + '\',this.id)">X</span></td></tr></table>');
$('#combobox option:eq(' + index + ')').remove();
fieldnames.push(text);
valuenames.push(selectedItem);
}
function addOption(text, selectedItem) {
for (var i = valuenames.length - 1; i >= 0; i--) {
if (valuenames[i] === selectedItem) {
valuenames.splice(i, 1);
fieldnames.splice(i, 1);
}
}
$("#combobox").append($("<option></option>").val(selectedItem).text(text));
$('#' + selectedItem).parent().parent().parent().parent().remove();
sortComboBox();
}

A simple change to your code can resolve your problem.
Give the default option some weird value. Eg:
<option value="null" selected="selected">Choose Fruit</option>
And append the follow code the the start of your cbchange() function.
if($('#combobox').val()=="null"){
return false;
}
See jsfiddle example

Need to $post text of select boxes, not their values

Need to $post text of select boxes, not their values.
HTML :
<select name="one" id="one">
<option value="0">Select *</option>
<option value="3000">Plan A</option>
<option value="6000">Plan B</option>
<option value="9000">Plan C</option>
</select>
<br />
<select name="two" id="two">
<option>Please choose from above</option>
</select>
<div id="total"></div>
JS :
// arrays instead of comma separated list and added base key
var data = {
"0": ["Please choose from above"],
"3000": ["saad_0", "Coffee_465", "Coke_984"],
"6000": ["saad_0", "Coffee_465", "Coke_984"],
"9000": ["saad_0", "Chips_123", "Cookies_987"]
}
$("#one").change(function () {
var first = $(this),
second = $("#two"),
key = first.val(),
// instead of the original switch code
vals = data[key] == undefined ? data.base : data[key],
html = [];
// create insert html before adding
$.each(vals, function (i, val) {
var v = val.split('_');
html.push('<option value="' + v[1] + '">' + v[0] + '</option>')
});
// no need to empty the element before adding the new content
second.html(html.join());
});
$("#one,#two").change(function () {
var val1 = parseInt($('#one').val()) || 0,
val2 = parseInt($('#two').val()) || 0;
$('#total').text(val1 + val2)
})
What I'm using :
$message .= "<br>One : " . $_POST['one'];
$message .= "<br>Two : " . $_POST['two'];
And in email result I'm getting values, which I don't want. As values are only needed for calculation.
Someone told me to bind my post method with jquery, which I have no idea about it.
Demo : jsfiddle link

$("#yourdropdownid option:selected").text();