Select option with JQUERY in laravel 9 - javascript

I'm making a form for setting data. so when I select by department and I select the IT department. the data ends there, but here when I select the IT department, what appears instead selects the option by employee. Which part is wrong?
this is the code for addsetting.blade.php:
and this is how the form Mode Alokasi
dropdown form for "by departement":
display when selected By department
value for departemen name:
value for department name
when one of the department names is clicked, what appears instead is Employee Tags
department names is clicked,Employee Tags appears
even though the employee tags dropdown should only be for allocation mode "By Tags karyawan"
and this is the dropdown menu for the correct employee tags
$(function() {
$('#mode_company').prop("hidden", true);
$('#mode_departemen').prop("hidden", true);
$('#mode_employee').prop("hidden", true);
$('#jk_employee').prop("hidden", true);
$('#sm_employee').prop("hidden", true);
$('#modealokasi').on('change', function(e) {
if (e.target.value == 'By Karyawan') {
$('#mode_company').prop("hidden", true);
$('#mode_departemen').prop("hidden", true);
$('#mode_employee').prop("hidden", false);
$('#mode_employee').on('change', function(a) {
if (a.target.value == 'Jenis Kelamin') {
$('#jk_employee').prop("hidden", false);
$('#sm_employee').prop("hidden", true);
} else {
$('#jk_employee').prop("hidden", true);
$('#sm_employee').prop("hidden", false);
};
});
} else if (e.target.value == 'By Company') {
$('#mode_company').prop("hidden", false);
$('#mode_departemen').prop("hidden", true);
$('#mode_employee').prop("hidden", true);
} else {
$('#mode_company').prop("hidden", true);
$('#mode_departemen').prop("hidden", false);
$('#mode_employee').prop("hidden", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6" id="modealokasi">
<div class="form-group">
<div class="form-group col-sm" id="modealokasi">
<label for="mode" class="col-form-label">Mode Alokasi</label>
<select name="mode" id="mode" class="form-control">
<option value="">-- Pilih Mode Alokasi --</option>
<option value="By Company">By Company</option>
<option value="By Departemen">By Departemen</option>
<option value="By Karyawan">By Tags Karyawan</option>
</select>
</div>
</div>
<div class="form-group col-sm" id="mode_company">
<label for="company" class="col-form-label">Company</label>
<select name="company" id="company" class="form-control">
<option value="">-- Pilih Company --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="form-group col-sm" id="mode_departemen">
<label for="id_departemen" class="col-form-label">Departemen</label>
<select name="id_departemen" id="id_departemen" class="form-control">
<option value="">-- Pilih Departemen --</option>
<option value="KONVENSIONAL">KONVENSIONAL</option>
<option value="IT DEPARTEMEN">IT DEPARTEMEN</option>
<option value="KEUANGAN">KEUANGAN</option>
</select>
</div>
<div class="form-group col-sm" id="mode_employee">
<label for="tags" class="col-form-label">Tags Karyawan</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Tags --</option>
<option value="Jenis Kelamin">Jenis Kelamin</option>
<option value="Status">Status</option>
</select>
</div>
<div class="form-group col-sm" id="jk_employee">
<label for="tags" class="col-form-label">Jenis Kelamin</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Jenis Kelamin --</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group col-sm" id="sm_employee">
<label for="tags" class="col-form-label">Stat. Menikah</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Status Menikah --</option>
<option value="Sudah">Sudah</option>
<option value="Belum">Belum</option>
</select>
</div>
</div>


This is not complete because I do not speak your language
But it shows you how to do this
$(function() {
$('#mode_company').prop("hidden", true);
$('#mode_departemen').prop("hidden", true);
$('#mode_employee').prop("hidden", true);
$('#jk_employee').prop("hidden", true);
$('#sm_employee').prop("hidden", true);
$('#mode').on('change', function(e) {
const val = this.value;
$('#mode_employee').prop("hidden", val !== 'By Karyawan');
$('#mode_company').prop("hidden", val !== 'By Company');
$('#mode_departemen').prop("hidden", val !== 'By Departemen');
});
$('#mode_employee').on('change', function(a) {
const val = this.value
$('#jk_employee').prop("hidden", val !== 'Jenis Kelamin');
$('#sm_employee').prop("hidden", val !== 'Status');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6" id="modealokasi">
<div class="form-group">
<div class="form-group col-sm">
<label for="mode" class="col-form-label">Mode Alokasi</label>
<select name="mode" id="mode" class="form-control">
<option value="">-- Pilih Mode Alokasi --</option>
<option value="By Company">By Company</option>
<option value="By Departemen">By Departemen</option>
<option value="By Karyawan">By Tags Karyawan</option>
</select>
</div>
</div>
<div class="form-group col-sm" id="mode_company">
<label for="company" class="col-form-label">Company</label>
<select name="company" id="company" class="form-control">
<option value="">-- Pilih Company --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="form-group col-sm" id="mode_departemen">
<label for="id_departemen" class="col-form-label">Departemen</label>
<select name="id_departemen" id="id_departemen" class="form-control">
<option value="">-- Pilih Departemen --</option>
<option value="KONVENSIONAL">KONVENSIONAL</option>
<option value="IT DEPARTEMEN">IT DEPARTEMEN</option>
<option value="KEUANGAN">KEUANGAN</option>
</select>
</div>
<div class="form-group col-sm" id="mode_employee">
<label for="tags" class="col-form-label">Tags Karyawan</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Tags --</option>
<option value="Jenis Kelamin">Jenis Kelamin</option>
<option value="Status">Status</option>
</select>
</div>
<div class="form-group col-sm" id="jk_employee">
<label for="tags" class="col-form-label">Jenis Kelamin</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Jenis Kelamin --</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group col-sm" id="sm_employee">
<label for="tags" class="col-form-label">Stat. Menikah</label>
<select name="tags" id="tags" class="form-control">
<option value="">-- Pilih Status Menikah --</option>
<option value="Sudah">Sudah</option>
<option value="Belum">Belum</option>
</select>
</div>
</div>

Related

Change options when I select a category using Javascript (Country/State)

Im trying to hide some options when I select a different country. These options are the states of this country.
But, when I select the country, it doesnt showing nothing in the subcategory.
<script>
$('#profile-state').find('option').hide();
$('#profile-country').change(function() {
var $cat = $(this).find('option:selected');
var $subCat = $('#profile-state').find('.' + $cat.attr('value'));
$('#profile-state').find('option').not("'"+ '.' + $cat.attr('value') + "'").hide();
$subCat.show();
$subCat.find('option').first().attr('selected', 'selected');
});
</script>
<div class="form-group field-profile-country required">
<label class="control-label" for="profile-country">País</label>
<select id="profile-country1" class="form-control" name="Profile[country]" aria-required="true">
<option value="">Selecione:</option>
<option value="United States">Estados Unidos</option>
<option value="Brazil">Brasil</option>
</select>
</div>
<div class="form-group field-profile-state required">
<label class="control-label" for="profile-state">Estado</label>
<select id="profile-statew" class="form-control" name="Profile[state]" aria-required="true">
<option value="">Selecione:</option>
<option value="Dont Say">Dont Say</option>
<option value="Unidade States 1">New Work</option>
<option value="Unidade States 2">Washington</option>
<option value="Brazil 1">Rio de Janeiro</option>
<option value="Brazil 2">São Paulo</option>
</select>
</div>
So, I try make differents values using numbers, coz I cant use the same values in my application. Someone can help me?

There are a few typos in your code, like wrong spelling of united states in the subcategory dropdown etc. I have changed your script to select only those subcategory options that begin with the name of the selected country by using(^).
$(document).ready(function() {
$('#profile-state').find('option').hide();
$('#profile-country').change(function() {
var $cat = $(this).find('option:selected');
console.log($cat);
var $subCat = $("#profile-state").find('option[value^="'+$cat.attr('value')+' "]');
console.log($subCat);
$('#profile-state option:selected').removeAttr('selected');
$('#profile-state').find('option').not('option[value^="'+$cat.attr('value')+' "]').hide();
$subCat.show();
$subCat.find('option').first().attr('selected', 'selected');
});
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="form-group field-profile-country required">
<label class="control-label" for="profile-country">País</label>
<select id="profile-country" class="form-control" name="Profile[country]" aria-required="true">
<option value="">Selecione:</option>
<option value="United States">Estados Unidos</option>
<option value="Brazil">Brasil</option>
</select>
</div>
<div class="form-group field-profile-state required">
<label class="control-label" for="profile-state">Estado</label>
<select id="profile-state" class="form-control" name="Profile[state]" aria-required="true">
<option value="">Selecione:</option>
<option value="Dont Say">Dont Say</option>
<option value="United States 1">New Work</option>
<option value="United States 2">Washington</option>
<option value="Brazil 1">Rio de Janeiro</option>
<option value="Brazil 2">São Paulo</option>
</select>
</div>

T.Shah's answer works as required. But
you could do it with less effort like this too:
$(document).ready(function() {
const $cntr=$('#profile-country').change(function() {
$("#profile-state option").each(function(){$(this).toggle(this.value.slice(0,5)==$cntr.val().slice(0,5)) });
});
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="form-group field-profile-country required">
<label class="control-label" for="profile-country">País</label>
<select id="profile-country" class="form-control" name="Profile[country]" aria-required="true">
<option value="">Selecione:</option>
<option value="United States">Estados Unidos</option>
<option value="Brazil">Brasil</option>
</select>
</div>
<div class="form-group field-profile-state required">
<label class="control-label" for="profile-state">Estado</label>
<select id="profile-state" class="form-control" name="Profile[state]" aria-required="true">
<option value="">Selecione:</option>
<option value="Dont Say">Dont Say</option>
<option value="United States 1">New Work</option>
<option value="United States 2">Washington</option>
<option value="Brazil 1">Rio de Janeiro</option>
<option value="Brazil 2">São Paulo</option>
</select>
</div>

Passing ID in two different select function into 1 const function in jQuery?

I have 2 different select function that I'll use and get the id from the two different select and pass it into the 1 main function. But I have problem with getting the id from the select function.
What is the correct way on how to pass the id of cat_id and role_id into the getMyMode(a,b)
$(document).ready(function() {
$("#cat").change(function() {
let cat_id = $(this).val();
getMyMode(cat_id);
});
$("#role").change(function() {
let role_id = $(this).val();
getMyMode(role_id);
});
});
const getMyMode = (a, b) => {
console.log(a, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Like this
const getMyMode = (a, b) => { console.log(a, b); };
$(function() { // when page has loaded
$("#cat, #role").on("change", function() { // when either has changed
let role_id = $("#role").val();
let cat_id = $("#cat").val();
getMyMode(cat_id,role_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Get the looping selected input value and sum the value inside when it change

I have a simple form that loops some select elements from the server. In this case, I want to sum every option value that selected and not the disabled one and show the calculation of these values into the input value every time when the user change the value inside it. How is it work with onchage event. Thanks in advance.
HTML Code Example
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" required>
<button type="submit">Submit</button>
</form>

Filter, Map and reduce
$(function() {
const sumSels = () => $("#total").val($sels
.filter(":enabled") // this is not strictly needed in your case
.map(function() { return +this.value })
.get()
.reduce((a, b) => a + b)
.toFixed(2));
const $sels = $('[name="presence-value"]');
$sels.on("change", sumSels); // event handler
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>
Version with dynamically added or removed selects
$(function() {
const sumSels = (e) => $("#total").val(
$("form").find('[name="presence-value"]')
.filter(":enabled") // this is not strictly needed in your case
.map(function() {
return +this.value
})
.get()
.reduce((a, b) => a + b)
.toFixed(2));
$("form").on("change", "[name='presence-value']", sumSels); // event handler on existing sels
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>

You can just listen to the change event from any of the selects, then add their values together
$(document).ready(function() {
$('select').change(function() {
let total = 0;
$('select').each(function() {
total += +$(this).val()
})
console.log('the total is', total)
$('[name=total]').val(total)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input name='total' type="number" value="0" required>
<button type="submit">Submit</button>
</form>

You need to use document.querySelectorAll('select') to get all select tags and then by selectedOptions get selected value of each select tags and calculate sum of them.
All above actions is in the one method (say getSum) that you can bind with onchange="getSum()" of each select tag.
Note that this solution is based on pure javascript code and I don't use any js library.
function getSum() {
var selectes = document.querySelectorAll('select');
sum = 0;
for (var i = 0; i < selectes.length; i++) {
sum += +selectes[i].value;
}
document.getElementById("submited").value = sum;
}
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input id="submited" type="number" value="0" required>
<button type="submit">Submit</button>

How can I filter dropdown select option with using jQuery?

I am trying to filter (select name="DepartmentName" id="DepartmentName")according to (select name="HospitalName" id="HospitalName")'s value but it returns me zero item. What I want to do is for a user to select a hospital, then see the departments from that hospital and select one ("DepartmentName"). In other words, I want to filter the departments according to the selected hospital and offer the departments in that hospital as an option. How can I fix this?
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-120px;">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
#foreach (var item in Model.hospitals)
{
<option value="#item.Id" data-rel ="#item.Id">#item.Name</option>
}
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-150px;">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
#foreach (var item in Model.departments)
{
<option value="#item.Id" >#item.Name</option>
}
</select>
<div class="select-dropdown"></div>
</div>
script code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#HospitalName").change(function() {
$("#DepartmentName option").hide();
$("#DepartmentName option[id^='" + $(":selected", this).data("rel") + "']").show();
model
public class ViewModel2
{
public Patient patients;
public Illness illness;
public List<Doctor> doctors { get; set; }
public List<Illness> illnesses { get; set; }
public List<Hospital> hospitals { get; set; }
public List<DAppDate> dAppDates { get; set; }
public List<Department> departments { get; set; }
public List<Appointment> appointments { get; set; }
public Hospital hospital { get; set; }
}
I can list the department's names but I can not filter that. when I chose "Medicana" I should list only "Nutrition and Diet" and "dermatology" because "psychiatry " is department of another hospital's department and should not be shown. No output options anymore. Additionally I should not create the option dynamically have to list them help of foreach.

You can use matcher method of select2 plugin . So ,whenever user select any value from 1st select-box you can filter options inside 2nd select-box using $(option[0].outerHTML).attr("value") == rel_ .
Demo Code :
$(function() {
$("select").select2();
$("#HospitalName").change(function() {
//get rel value
var rel_ = $(this).find("option:selected").data("rel")
$("#DepartmentName").select2("val", ""); //remove any selected value
//intialze
$("#DepartmentName").select2({
matcher: function(term, text, option) {
//only show options where rel = value ..
return $(option[0].outerHTML).attr("value") == rel_
}
})
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1">Item 1 h1</option>
<option value="hosp-1">Item 2 h1</option>
<option value="hosp-2">Item 3 h2</option>
<option value="hosp-2">Item 4 h2</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>

var $select1 = $('#HospitalName'),
$select2 = $('#DepartmentName'),
$options = $select2.find('option');
$select1.on('change', function() {
var hosp = $(this).find("option:selected").data("rel");
$select2.html($options.filter('[data-hosp="' + hosp + '"]'));
$select2.val($select2.find("option:first").val());
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="Item 1" data-hosp="hosp-1">Item 1</option>
<option value="Item 1" data-hosp="hosp-2">Item 2</option>
<option value="Item 1" data-hosp="hosp-3">Item 3</option>
<option value="Item 1" data-hosp="hosp-1">Item 4</option>
<option value="Item 1" data-hosp="hosp-2">Item 5</option>
<option value="Item 1" data-hosp="hosp-3">Item 6</option>
<option value="Item 1" data-hosp="hosp-1">Item 7</option>
<option value="Item 1" data-hosp="hosp-2">Item 8</option>
<option value="Item 1" data-hosp="hosp-3">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>

Consider the following.
$(function() {
$("#HospitalName").change(function() {
$("#DepartmentName option").hide();
$("#DepartmentName option[value='" + $(":selected", this).data("rel") + "']").show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1" id="hosp-1-item-1">Item 1</option>
<option value="hosp-1" id="hosp-2-item-2">Item 2</option>
<option value="hosp-1" id="hosp-3-item-3">Item 3</option>
<option value="hosp-2" id="hosp-1-item-4">Item 4</option>
<option value="hosp-2" id="hosp-2-item-5">Item 5</option>
<option value="hosp-2" id="hosp-3-item-6">Item 6</option>
<option value="hosp-3" id="hosp-1-item-7">Item 7</option>
<option value="hosp-3" id="hosp-2-item-8">Item 8</option>
<option value="hosp-3" id="hosp-3-item-9">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
Added a Data attribute to help create a relationship. I also updated the ID so that there is something to tie to the relationship. When a User makes a change, it hides the items and only allows specific ones to be shown.

2 Select with same options, alerting when it is already selected at the first Select

I'm having a hard time with this, basically I have 2 Select with same options. The 2 Select Inputs named as registrationdiscounttype1 and registrationdiscounttype2
So First I choose a discount for registrationdiscounttype1 then if I will add a discount for registrationdiscounttype2 if the option is already selected in discount number 1 it will show an error that will say the discount is already selected.
I've already made a javascript based on what I've search so far, but I can't make it work, can you help me what is wrong with my code, or what should I use?
This is the sample photo
// Change in Discount 2
$("#registrationdiscounttype2").unbind('change').bind('change', function()
if ($('#registrationdiscounttype2').closest('table').find('option[value=' + $('#registrationdiscounttype1').val() + ']:selected').length > 1)
{
alert('Discount is already selected, Please choose another one');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<?php foreach ($discounttypeData as $discounttype)
{
?>
<option value="<?php echo $discounttype['discounttype_id']; ?>"> <?php echo $discounttype['discounttype_name']; ?> </option>
<?php
}
?>
</select>
</div>
</div>

u can try
$(document).ready(function(){
$("#registrationdiscounttype2").unbind('change').bind('change', function() {
if ($('#registrationdiscounttype2').val() == $('#registrationdiscounttype1').val())
{
alert('Discount is already selected, Please choose another one');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
</div>
<div class="form-group" id="result">
</div>

Here you go with an example solution (if select element are siblings) https://jsfiddle.net/pvchxyup/1/
$('select').change(function(){
if($(this).val() === $(this).siblings('select').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
If your element are not siblings, then follow https://jsfiddle.net/pvchxyup/2/
$('select').change(function(){
if($('#select1').val() === $('#select2').val() ){
console.log("Same value!!!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="select1">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test5">Test 5</option>
</select>
</div>
<div>
<select id="select2">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test7">Test 7</option>
</select>
</div>

No need to use bind, simple and easy way to do that.
Try this:
$("#registrationdiscounttype2").change(function(){
if($(this).val()==$('#registrationdiscounttype1').val()){
alert("Already Selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="registrationdiscounttype1" class="col-sm-4 control-label">Discount 1: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype1" id="registrationdiscounttype1">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="registrationdiscounttype2" class="col-sm-4 control-label">Discount 2: </label>
<div class="col-sm-8">
<select class="form-control" name="registrationdiscounttype2" id="registrationdiscounttype2">
<option value="">Select Discount </option>
<option value="sel1">sel1</option>
<option value="sel2">sel2</option>
</select>
</div>

Categories

Resources