We Keep Coding

Is there a way to get the id of the second-populated drop-down menu using javascript?

I am creating an online exam system, and I have two drop-down menus. One menu checks for difficulty level, and based on the selection of "Easy", "Medium", and "Hard", the second menu displays the associated questions. Now, I am trying to retrieve the id of the questions from the second drop-down menu which is based off of the first. I'm pretty new to Ajax, so is there a way to achieve this? Any help would be appreciated. Thanks.
<form>
<select id="difficulty" name="difficulty" onchange="changeType();">
<option value="">Select a difficulty level</option>
<option value="E" >Easy</option>
<option value="M">Medium</option>
<option value="H">Hard</option>
</select>
<select name="questions" onchange="showQuestion(this.id)>
<option id="">Select a question</option>
<option id="1" onclick="showQuestion(this.id)">Question1</button>
<option id="2" onclick="showQuestion(this.id)">Question2</button>
<option id="3"></option>
<option id="4"></option>
<option id="5"></option>
<option id="6"></option>
</select>
</form>
<script>
var data =
[
{
name: "E",
options: ["Question1", "Question2"]
},
{
name: "M",
options: ["Question3", "Question4"]
},
{
name: "H",
options: ["Question5", "Question6"]
}
];
function changeType()
{
var i, optionSelected, str, j, optionE1Two;
//get currently selected first option
optionSelected = document.getElementById("difficulty").value;
i = 0;
while (i < data.length && data[i].name != optionSelected)
{
i++;
}
//populate second menu
if(i < data.length)
{
str = '';
for(j=0; j<data[i].options.length; j++)
{
str += '<option value = "'+data[i].options[j]+'">'+data[i].options[j]+'</option>';
}
optionE1Two = document.getElementById("questions");
optionE1Two.innerHTML = str;
}
}
document.getElementById("difficulty").addEventListener("change",changeType,false);
</script>
<br>
<div id="text" ><b><center>Questions you select will be listed here.</center></b></div>
<script>
function showQuestion(str) {
//alert(str); //alert outputs "questions"
if(str == "") {
document.getElementById("text").innerHTML="";
return;
}
if(window.XMLHttpRequest){
hr = new XMLHttpRequest();
}else {
hr = new ActiveXObject("Microsoft.XMLHTTP");
}
hr.onreadystatechange=function() {
if(this.readyState==4 && this.status==200){
document.getElementById("text").innerHTML=this.responseText;
}
};
hr.open("GET", "URL", true);
hr.send();
}
</script>

Welcome to Stack Overflow!
Here is my understanding of your logic.
User Selects the Difficulty
User Selects the Question to work with
Then you process that action
You are looking for the ID, value containing the ID, of the selected question? I have put together a Codepen of my solution. I tried to avoid making any dramatic changes. I did change:
Changed 'id' to 'value' on select options
Modified the 'onChange' event to send the whole element
Added line 52 to make the questionId a var to make future use a little easier
Using values is preferred for many reasons. One in particular is the accessibility. The DOM allows direct access to the selected index and its value. I do strongly recommend reviewing your code though for syntax errors. There are quite a few. I tackled a few that stuck out and hindered the solution to your question.
P.S. I have made a few more mods as well to fix the changeType() function. It was throwing an error when setting the innerHTML.
var data = [{
name: "E",
options: ["Question1", "Question2"]
},
{
name: "M",
options: ["Question3", "Question4"]
},
{
name: "H",
options: ["Question5", "Question6"]
}
];
function changeType() {
var i, optionSelected, str, j, optionE1Two;
//get currently selected first option
optionSelected = document.getElementById("difficulty").value;
i = 0;
while (i < data.length && data[i].name != optionSelected) {
i++;
}
//populate second menu
if (i < data.length) {
str = '<option value="">Select a question</option>';
for (j = 0; j < data[i].options.length; j++) {
str += '<option value = "' + data[i].options[j] + '">' + data[i].options[j] + '</option>';
}
optionE1Two = document.getElementById("questions");
optionE1Two.innerHTML = str;
document.getElementById("text").innerHTML = "<b><center>Questions you select will be listed here.</center></b>";
}
}
document.getElementById("difficulty").addEventListener("change", changeType, false);
function showQuestion(el) {
// Accepting the element allows direct access
console.dir(el.value); // consoles the value of the selected option.
var questionId = el.value;
if (questionId == "") {
document.getElementById("text").innerHTML = "<b><center>Questions you select will be listed here.</center></b>";
return;
} else {
document.getElementById("text").innerHTML = "<b><center>You have selected Question: " + el.options[el.selectedIndex].text + "</center></b>";
}
if (window.XMLHttpRequest) {
hr = new XMLHttpRequest();
} else {
hr = new ActiveXObject("Microsoft.XMLHTTP");
}
hr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("text").innerHTML = this.responseText;
}
};
hr.open("GET", "URL", true);
hr.send();
}
<form>
<select id="difficulty" name="difficulty" onchange="changeType();">
<option value="">Select a difficulty level</option>
<option value="E" >Easy</option>
<option value="M">Medium</option>
<option value="H">Hard</option>
</select>
<!-- changed the change event to send the element as a whole -->
<select name="questions" id="questions" onchange="showQuestion(this)">
<option value="">Select a question</option>
<option value="1">Question1</option>
<option value="2">Question2</option>
</select>
</form>
<br>
<div id="text">
<b><center>Questions you select will be listed here.</center></b>
</div>

I want dropdown reset to original when second time ajax result come

On change of type and category, department should be changed.
It works for one time, but when I change category and type a second time without refresh, it does not works.
I don't want to refresh page for second time or much more time.
<select id="CATEGORY_ID">
<option value="21">desc</option>
<option value="22">short</option>
<option value="23">medium</option>
<option value="24">long</option>
</select>
<select class="bx-user-field-enum" name="UF_TYPE">
<option value="1">comp</option>
<option value="2">query</option>
<option value="3">fault</option>
</select>
<select name=UF_DEPT>
<option value="21">Volvo</option>
<option value="22">Saab</option>
<option value="23">Mercedes</option>
<option value="24">Audi</option>
</select>
JS here:
$('#CATEGORY_ID,[name=UF_TYPE]').on('change', function() {
var id = $('#CATEGORY_ID').val();
var select = $('.bx-user-field-enum').val();
if(id !=null && select !=null){
$.ajax({
type: "POST",
//dataType: 'json',
url:"ajax_dept.php",
data: {
select: select, id: id
},
success: function(msg) {
removeOptions(msg);
}
});
}
});
function removeOptions(msg) {
var cars = document.getElementsByName("UF_DEPT")[0];
var val = JSON.parse(msg);
for(var i=0; i<=cars.length; i++) {
var isFound = false;
for(var j=0;j<=i; j++) {
if(val[j] == cars[i].value) {
isFound=true;
//cars[i].style.color="red";
cars[i].style.display="block";
break;
}
}
if(!isFound) {
cars[i].style.display="none";
}
$('[name=UF_DEPT]').val(val[0]);
}
}

That is a logic issue.
I'm pretty sure that you want to remove the <options> from the cars (3rd dropdown) if they're not in the array received via ajax.
You use the <select> value, in the comparison, instead of each <option> value.
You double for loop just can lead to some errors.
The break will end the looping on first match, instead of removing them all.
I don't get what you try to acheive with the if(id !=null && select !=null){ comparison, which is always TRUE.
So I fixed your code using only one for loop and .indexOf() to check if the option value is in array.
I made some replacements in your code and commented them.
But I completely removed you double loop.
Here is a CodePen with all console logs showing.
console.clear();
$('#CATEGORY_ID, #UF_TYPE').on('change', function() {
var id = $('#CATEGORY_ID').val();
var select = $('#UF_TYPE').val();
//console.log(id+" "+select);
if(id !=null && select !=null){ // This condition is always TRUE
/*
$.ajax({
type: "POST",
//dataType: 'json',
url:"ajax_dept.php",
data: {
select: select, id: id
},
success: function(msg) {
removeOptions(msg);
}
});
*/
//Simulating Ajax response.
console.log("Ajax request!")
removeOptions('["21","23","24"]'); // I guess you receive your array as a string.
}
});
function removeOptions(msg) {
//var cars = document.getElementsByName("UF_DEPT")[0]; // You have the <select> tag here.
var cars = $("#UF_DEPT option"); // You have all <option> here.
//console.log(cars.length);
//console.log(msg);
var val = JSON.parse(msg); // Parse the string to get an array.
//console.log(val);
for(i=0; i<cars.length; i++) {
//console.log(i);
//console.log( cars.eq(i).attr("value") );
if( val.indexOf(cars.eq(i).attr("value")) == -1){
console.log("Hide "+cars.eq(i).val()+" - "+cars.eq(i).text()+" is not in the array.");
cars.eq(i).hide();
}else{
console.log("Show "+cars.eq(i).val()+" - "+cars.eq(i).text()+" is in the array.");
cars.eq(i).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="CATEGORY_ID">
<option value="21">desc</option>
<option value="22">short</option>
<option value="23">medium</option>
<option value="24">long</option>
</select>
<select id="UF_TYPE" class="bx-user-field-enum" name="UF_TYPE">
<option value="1">comp</option>
<option value="2">query</option>
<option value="3">fault</option>
</select>
<select id="UF_DEPT" name=UF_DEPT>
<option value="21">Volvo</option>
<option value="22">Saab</option>
<option value="23">Mercedes</option>
<option value="24">Audi</option>
</select>

I have modified your code and separated the function bound to the change events of the CATEGORY_ID and UF_TYPE dropdowns. Moreover, I have created a separate function to handle updation of department dropdown options. Below id the modified code:
HTML:
<select id="CATEGORY_ID">
<option value="21">desc</option>
<option value="22">short</option>
<option value="23">medium</option>
<option value="24">long</option>
</select>
<!-- Note: I have added Id to this select element -->
<select id="UF_TYPE" class="bx-user-field-enum" name="UF_TYPE">
<option value="1">comp</option>
<option value="2">query</option>
<option value="3">fault</option>
</select>
<select name=UF_DEPT>
<option value="21">Volvo</option>
<option value="22">Saab</option>
<option value="23">Mercedes</option>
<option value="24">Audi</option>
</select>
JS:
//A specialized function to update the department options
function update_department_options()
{
var id = $('#CATEGORY_ID').val();
var select = $('#UF_TYPE').val();
if(id !=null && select !=null) {
$.ajax({
type: "POST",
//dataType: 'json',
url:"ajax_dept.php",
data: {
select: select, id: id
},
success: function(msg) {
removeOptions(msg);
}
});
}
}
$('#UF_TYPE').on('change', function() {
update_department_options();
});
$('#CATEGORY_ID').on('change', function() {
update_department_options();
});
function removeOptions(msg) {
var cars = document.getElementsByName("UF_DEPT")[0];
var val = JSON.parse(msg);
for(var i=0; i<=cars.length; i++) {
var isFound = false;
for(var j=0;j<=i; j++) {
if(val[j] == cars[i].value) {
isFound=true;
//cars[i].style.color="red";
cars[i].style.display="block";
break;
}
}
if(!isFound) {
cars[i].style.display="none";
}
$('[name=UF_DEPT]').val(val[0]);
}
}

change dropdown list to its original state

i have two dropdownlists in my view. by changing the value on the first one i can change the value on the second one. in the first run it works fine using scrip below.
but when i change the first dropdownlist to something else it will not work. i believe if i can change the second dropdownlist value and text and .... rest to its original state it will be ok.
here is my code :
<select id="ddlDepartment">
<option selected disabled>اselect department</option>
#foreach (var item in Model)
{
<option value="#item.DepartmentTitle">#item.DepartmentTitle</option>
}
</select>
</td>
</tr>
<tr>
<td>grade</td>
<td>
<select id="ddlgrade">
<option selected disabled="disabled">Select Grade</option>
<option id="id_bachelor" value="bachelor">bachelor</option>
<option id="id_Masters" value="Master">Masters</option>
<option id="Doctorate" value="Doctorate">Doctorate</option>
</select>
and here is my script :
$('#ddlDepartment')
.change(function() {
debugger;
var ddlDepartment = $('#ddlDepartment').val();
var grade = $('#ddlgrade').val();
getGrade();
function getGrade() {
$('#ddlgrade')
.change(function() {
grade = $('#ddlgrade').val();
$.ajax('/AdminPages/showStudents/' + ddlDepartment + '/' + grade)
.done(function(data) {
$('#lstStudents').html(data);
});
});
}
});
i get the erro here:
if ( !( eventHandle = elemData.handle ) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}

You have to move getGrade() function outside. getGrade() function bind a change event handler for second select EVERYTIME you changed the first select.
Final Solution
$('#ddlgrade').change(function() {
var ddlDepartment = $('#ddlDepartment').val();
var grade = $(this).val();
if(ddlDepartment){
$.ajax('/AdminPages/showStudents/' + ddlDepartment + '/' + grade)
.done(function(data) {
$('#lstStudents').html(data);
});
}
else{
alert("Please select department first!");
}
});
Please take a look how works your code:
$('#ddlDepartment')
.change(function() {
var ddlDepartment = $('#ddlDepartment').val();
var grade = $('#ddlgrade').val();
alert(ddlDepartment);
getGrade();
function getGrade() {
$('#ddlgrade')
.change(function() {
grade = $('#ddlgrade').val();
alert(grade);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlDepartment">
<option selected disabled>اselect department</option>
<option val="1">acb</option>
<option val="1">acfdb</option>
</select>
<select id="ddlgrade">
<option selected disabled="disabled">Select Grade</option>
<option id="id_bachelor" value="bachelor">bachelor</option>
<option id="id_Masters" value="Master">Masters</option>
<option id="Doctorate" value="Doctorate">Doctorate</option>
</select>

2 variables from select box and hidden input

How can I get 2 different variables from select box and hidden inputs in jquery, i.e:
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text1">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text2">
<br />
<select name="startID[]" class="startID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="startText[]" value="Text3">
so I have 3 select boxes with 3 hidden inputs, how can I get the value of each select boxed and the text that is attached to? i.e: if I select like this:
Select item is 1 and text is Text1
Select item is 3 and text is Text2
Select item is 2 and text is Text3
Thanks in advance

function getValues() {
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
});
}
If you want to list the values on change:
$('select.startID,input[type="hidden"]').change(getValues);
Demo (modified a bit):
http://jsfiddle.net/6ev9evew/
NOTE
The updates below are not answers for the original question, but the question's author keeps posting extra questions in the comments! So the solution is above!
UPDATE:
As I can understand this is what you looking for:
function getValues() {
var me = this;
$('select').each(function (idx, el) {
console.log("Select item is " + $(el).val() + " and text is " + $(el).next('input[type="hidden"]').val());
if (el === me) return false;
});
}
So basically we stop the loop at the actual element. But it works only if you pass this function to an event handler.
DEMO 2: http://jsfiddle.net/6ev9evew/1/
UPDATE 2:
So, according to the third question, this is a version of the implementation. As I mentioned below in the comments section, there are multiple ways to implement it. This implementation uses that the array indexes are always in order.
function getValues() {
var result = [];
var me = this;
$('select').each(function (idx, el) {
var $el = $(el);
result[10*$el.val()+idx]=("Select item is " + $el.val() + " and text is " + $el.next('input[type="hidden"]').val()+'<br />');
if (me === el) return false;
});
$('#res').html(result.join(''));
}
$('select.startID,input[type="hidden"]').change(getValues);
DEMO 3:
http://jsfiddle.net/6ev9evew/2/
But you can also implement it with array.sort(fn) but than you do a second iteration on the result set.
Anyway if you have more than ten selects in your real code, don't forget to modify the multiplier at result[10*$el.val()+idx] !

If you want to know the value of the changed select (when the user selects a value on any of them) and also get the value of the input type hidden which is next to it, that's the way:
$('.startID').on('change', function () {
var sel = $(this).val();
var hid = $(this).next('input[type=hidden]').val();
console.log('Select item is ' + sel.toString() + ' and text is ' + hid.toString());
});
Demo
UPDATE
To achieve what you've asked in the comments, you can do it like this:
// Create two arrays to store the values.
var sel = [];
var hid = [];
$('.startID').on('change', function () {
// Put the selected values into the arrays.
sel.push($(this).val());
hid.push($(this).next('input[type=hidden]').val());
console.log(sel);
console.log(hid);
for (var i = 0; i < sel.length; i++) {
console.log('Select item is ' + sel[i].toString() + ' and text is ' + hid[i].toString());
}
});
Demo

Disable select option in group of select dropdowns when option is selected

What I'm trying to do: I have multiple select dropdowns, if an option is selected in one of the select dropdowns and the value exists in any of the other dropdowns the value should be disabled/unselectable, it again can become enabled/selectable if the selection is changed.
What happens with current code: it works about 50%, I can't pinpoint the issue, but I think because I'm applying a for loop some values get skipped and not disabled and sometimes the "Select" default option becomes disabled?!
Approach: The way I wrote my code was when a selection from the dropdown box occurs, enable all options, get the first dropdown's current selected value, if it's not the default "Select" then go through every dropdown box and disable any matching values, then repeat this process for the second dropdown's current selected value and so on.
Fiddle: http://jsfiddle.net/haakym/r2y73ndt/
Code:
HTML:
<div id="nomineeInfo">
<div>
<label>Manager</label>
<select class="positionTypes" id="pos_manager">
<option value="0">Select</option>
<option value="1">John Smith</option>
<option value="2">Jane Smith</option>
<option value="4">John Smoe</option>
</select>
</div>
<div>
<label>Deputy</label>
<select class="positionTypes" id="pos_deputy_manager">
<option value="0">Select</option>
<option value="1">John Smith</option>
<option value="2">Jane Smith</option>
<option value="3">John Doe</option>
</select>
</div>
<div>
<label>Finance</label>
<select class="positionTypes" id="pos_finance">
<option value="0">Select</option>
<option value="1">John Smith</option>
<option value="3">John Doe</option>
<option value="4">John Smoe</option>
</select>
</div>
Javascript:
$('#nomineeInfo').on('change', '.positionTypes', function () {
var selectedValue = $(this).val();
var dropdownOnChangeId = $(this).prop('id');
var positionTypesEn = ['manager', 'deputy_manager', 'finance'];
// set all enabled
for (var i = 0; i < 7; i++) {
$('#pos_'+positionTypesEn[i]).each(function(){
$("option", this).removeAttr('disabled');
});
};
for (var i = 0; i < 7; i++) {
// if position type selected value is not 0, i.e. if it's not "Select"
if( $('#pos_' + positionTypesEn[i]).val() != 0 ){
// go through each option in every dropdown
for (var j = 0; j < 7; j++) {
console.log( positionTypesEn[j] ); // show current dropdown
$('#pos_' + positionTypesEn[j] + ' option').each(function(k){
if( !$(this).is(':selected') ){
if( $(this).val() == selectedValue && $(this).val() != 0 ){
$(this).prop('disabled', 'true');
console.log('disabled: ' + $(this).val() );
}
}
});
}
}
}
});
Any help is much appreciated!

After enabling all the options, you need to go through all the menus, get their selected values, and re-disable all of them in the other menus, not just the one you just changed.
$(document).ready(function () {
$('#nomineeInfo').on('change', '.positionTypes', function () {
// Get the selected options of all positions
var allSelected = $(".positionTypes").map(function () {
return $(this).val();
}).get();
// set all enabled
$(".positionTypes option").removeAttr("disabled");
// Disable selected options in other positions
$(".positionTypes option:not(:selected):not([value='0'])").each(function () {
if ($.inArray($(this).val(), allSelected) != -1) {
$(this).attr('disabled', true);
}
});
});
});
DEMO

try
$("select.positionTypes").change(function () {
$("select.positionTypes option").prop('disabled', false);
$("select.positionTypes option:selected:not([value='0'])").each(function (i) {
$("select.positionTypes option:nth-child(" + ((+this.value) + 1) + ")").prop('disabled', true)
});
});
DEMO

Try this too, an optimized version
$("select.positionTypes").change(function () {
$("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false);
$(this).data('index', this.value);
$("select.positionTypes option[value='" + this.value + "']:not([value='0'])").prop('disabled', true);
});
DEMO

Your html structure, classes and attempt is not bad but if you are using jQuery you should use its full advantages like .each function to make your live alot easier.
I would make an attempt like this:
$('.positionTypes').on('change', function () { //When any select changes...
var changedID = $(this).attr("id"); //Save id of select that was changed...
var selectedValue = $(this).val(); //Save value of select was changed...
if($(this).val() != "0") { //If we did not select a 0 value at all...
$('.positionTypes option').prop("disabled", false); //Enable all disabled options of all selects...
$('.positionTypes').each(function() { //Loop all existing selects
if($(this).attr("id") != changedID) { //If the select id is not our own select
$("#" + $(this).attr("id") + " option").each(function() { //loop all options of all selects except the one excluded by previous if clause
if($(this).attr("value") == selectedValue) { //if the value matches to saved value
$(this).prop("disabled", true); //Disable this one
}
});
}
});
};
});
I am not sure if this is 100% complete atleast it can disable options of other selects with identical value with a little bit more structured code.