Develop Reference

How to reference a selector in JQuery for select tag when there are multiple dropdown fields in a single form?

I have 4 choice fields in a single form. My jQuery code only captures one field. How can I capture the other fields and extract their values?
Also, I have applied the Select2 plugin on all these fields. Can someone please guide me? Thanks in advance.
$('select').change(function() {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
var csr = $("input[name=csrfmiddlewaretoken]").val();
console.log(textSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>

To get the selected text of all the select elements you can use map() to build an array of them, like this:
let getSelectedText = () => {
let textArr = $selects.map((i, el) => $(el).find('option:selected').text()).get();
console.log(textArr);
}
let $selects = $('select').on('change', getSelectedText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>

Open Another Input Text when the user selects an option

I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.

If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />

var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>

Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />

Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**

how to check a value from select, if you choose to give a value then it is not necessary?

this is my html,
I have two select if one select contains a value, then the required attribute is deleted,and the third select must be required
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub1" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="math,indonesia">Math (Indonesia)</option>
<option value="math,english">Math (English)</option>
</select>
<select class="form-control costume-{{$stud}}" name="subject-{{$stud}}[]" id="sub2" disabled="disabled">
<option value="" selected> --------Select-------- </option>
<option value="science,indonesia">Science (Indonesia)</option>
<option value="science,english">Science (English)</option>
</select>
<select class="form-control select-long costume-{{$stud}}" name="location_id[{{$stud}}]" disabled="disabled">
<option value="" selected> -----Select------</option>
#foreach ($venue as $row)
<option value="{{$row['location_id']}}">{{$row['location_name']}}</option>
#endforeach
</select>
<input type="checkbox" id="enableSelect-{{$stud}}" onclick="getCheck({{$stud}});">
and this is my jquery
function getCheck(id){
var e = document.getElementById("sub1");
var sub1 = e.options[e.selectedIndex].value;
console.log(sub1);
if($('#enableSelect-' +id).is(':checked')) {
$('.costume-' +id).prop("disabled", false);
$('.costume-' +id).prop("required", true);
$('.visibility').show();
}else{
$('.costume-' +id).prop("disabled", true);
$('.costume-' +id).prop("required", false);
$('.visibility').hide();
}
}

Your JS doesn't correspond to the HTML, the selectors don't match up.
I would check form values and set the required like this :-
$('select').on('change', function() {
if($(this).val() != ""){
$('select').prop('required',false);
}
});
This would work with your HTML as by default the select value is ""
You would also need required="true" on the and your default option should be something like this -
<option value="" disabled selected>Select your option</option>
on the select elements by default.

How to call different divs in same drop down menu

I have a drop down menu having different options which are hard coded. After that, there is another drop down menu which is disabled when no option from first drop down is selected and when we select any option it is enabled and shows some values.
I want to show different options in second drop down based on the value selected in first drop down i.e. in the same second drop down menu. I have created different divs for every value (having drop downs) selected in first. So i want to call that particular div for every value selected. Here is my code:
<script type="text/javascript">
function check(elem) {
document.getElementById('mySelect1').disabled = !elem.selectedIndex;
}
</script>
<select id="mySelect" onChange="check(this);" >
<option>Select an Option</option>
<option value="all">Select All</option>
<option value="name" >Names</option>
<option value="course" >Courses</option>
</select>
<select id="mySelect1" disabled="disabled" >
<?php
$sql="SELECT DISTINCT names FROM table ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value=' " . $row['Sno'] ."'>" . $row['names'] ."</option>";
}
?>
</select>
<select id="mySelect1" disabled="disabled" >
<?php
$sql="SELECT DISTINCT courses FROM table ";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "<option value=' " . $row['Sno'] ."'>" . $row['courses'] ."</option>";
}
?>
</select>
e.g. When i select name in first drop down menu, it shows me all the names from database in second div and when i select courses it shows me all the courses in the same drop down

You should not give the same id to more than one element.
Here is working example of how you can do what you want
function check(elem) {
document.querySelectorAll('.second').forEach(function(e) {
e.disabled = true;
});
if (elem.value !== "none" && elem.value !== "all") {
document.getElementById(elem.value).disabled = false;
} else if (elem.value === "all") {
document.querySelectorAll('.second').forEach(function(e) {
e.disabled = false;
});
}
}
<select id="mySelect" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value="names">Names</option>
<option value="courses">Courses</option>
</select>
<select id="names" class="second" disabled="disabled">
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
</select>
<select id="courses" class="second" disabled="disabled">
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>
EDIT
If you want it in one select instead of two then two select fields in html are unnecessary
Here is a working solution for one select with different options depending on first select value.
function check(elem) {
document.getElementById('select2').disabled = false;
document.getElementById('select2').value = "";
document.querySelectorAll('#select2 option').forEach(function(e) {
e.style.display = 'none';
});
if (elem.value === "none") {
document.getElementById('select2').disabled = true;
}
if (elem.value !== "all") {
document.querySelectorAll('#select2 option.' + elem.value).forEach(function(e) {
e.style.display = 'initial';
});
} else {
document.querySelectorAll('#select2 option').forEach(function(e) {
if (e.value !== "") {
e.style.display = 'initial';
}
});
}
}
<select id="select1" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value="name">Names</option>
<option value="course">Courses</option>
</select>
<select id="select2" disabled="disabled">
<option value=""></option>
<option class="name" value='John'>John</option>
<option class="name" value='Jacob'>Jacob</option>
<option class="name" value='Victoria'>Victoria</option>
<option class="name" value='Maurice'>Maurice</option>
<!-- Here instead of html you can insert your php -->
<option class="course" value='Course1'>Course 1</option>
<option class="course" value='Course2'>Course 2</option>
<option class="course" value='Course3'>Course 3</option>
<option class="course" value='Course4'>Course 4</option>
<!-- Here instead of html you can insert your php -->
</select>
EDIT2
Here is a solution for a select with names and courses and two selects after the first one.
function check(elem) {
document.querySelectorAll('.second').forEach(function(e) {
e.style.display = "none";
});
if (elem.value === "all") {
document.getElementById("names").style.display = "initial";
document.getElementById("courses").style.display = "initial";
}
}
<select id="mySelect" onChange="check(this);">
<option value="none">Select an Option</option>
<option value="all">Select All</option>
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>
<select id="names" class="second" style="display: none;">
<option value='John'>John</option>
<option value='Jacob'>Jacob</option>
<option value='Victoria'>Victoria</option>
<option value='Maurice'>Maurice</option>
</select>
<select id="courses" class="second" style="display: none;">
<option value='Course1'>Course 1</option>
<option value='Course2'>Course 2</option>
<option value='Course3'>Course 3</option>
<option value='Course4'>Course 4</option>
</select>

Disable specific option in specific dropdown

I'm working on a small website and I currently have two dropdowns in my form, both are below:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
I've experimented with some javascript but only at a beginner level. I was wondering if there's a way to disable a specific value in the studentType dropdown.
So for example if i select "Beginner" in the first dropdown then the option for "UpperLevel" in the second dropdown should be disabled.
This is what I tried, but it was not working:
var dropdown = document.getElementById("classType");
dropdown.onchange = function(event){
if (dropdown.value == "Beginner") {
// .....
Any ideas?
Thanks!

You can achieve this by hooking an event handler to the change event of the first select which sets the disabled property of the relevant option in the second select based on the chosen option, something like this:
$('#classType').change(function() {
$('#studentType option[value="upperLevel"]').prop('disabled', $(this).val() == 'Beginner')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="classType" id="classType" required>
<option value="" disabled="true" selected="true">Select Your Class Type</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select><br/>
<select name="studentType" id="studentType" required>
<option value="" disabled="true" selected="true">Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select><br/>

This should fit your needs:
http://codepen.io/themeler/pen/yOjWXB
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner">Beginner</option>
<option value = "Intermediate">Intermediate</option>
<option value = "Advanced">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value="lowerLevel">Lower Level</option>
<option value="upperLevel">Upper Level</option>
</select>
<br/>
$(function () {
var $class = $('#classType'),
$student = $('#studentType');
$class.on('change', function () {
var $this = $(this),
$ul = $student.find('[value="upperLevel"]');
// clear value of student type on class type change
$student.find(':selected').prop('selected', false);
$student.find('option:first-child').prop('selected', true);
// lock / unlock position
if ($this.val() === 'Beginner') {
$ul.prop('disabled', true);
} else {
$ul.prop('disabled', false);
}
});
});

By jQuery:
$('#studentType option[value="upperLevel"]').attr('disabled','disabled');

Here is how I would do it, add a data-enabled tag to each option like this:
<select name="classType" id="classType" required>
<option value="" disabled selected>Select Your Class Type</option>
<option value = "Beginner" data-enabled="lowerLevel">Beginner</option>
<option value = "Intermediate" data-enabled="lowerLevel,upperLevel">Intermediate</option>
<option value = "Advanced" data-enabled="upperLevel">Advanced</option>
</select>
<br/>
<select name="studentType" id="studentType" required>
<option value="" disabled selected>Select Your Student Type</option>
<option value = "lowerLevel">Lower Level</option>
<option value = "upperLevel">Upper Level</option>
</select>
<br/>
And on change of the drop down, disable all options in the other drop down, then loop through and see if they're either in the enabled tag of the selected, or blank like this:
$('#classType').on('change', function(){
var allowed = $('#classType option:selected').attr('data-enabled').split(',');
$('#studentType option').attr('disabled','disabled');
$('#studentType option').each(function(){
if (allowed.indexOf($(this).val()) > -1 || !$(this).val()) {
$(this).removeAttr('disabled');
}
});
});