How to Change Value of Select Options Based on Another Select Option Selected

how to change a selections options based on another select option selected?

Here is an example of what you are trying to do => fiddle

$(document).ready(function () {    $("#type").change(function () {        var val = $(this).val();        if (val == "item1") {            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");        } else if (val == "item2") {            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");        } else if (val == "item3") {            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");        } else if (val == "item0") {            $("#size").html("<option value=''>--select one--</option>");        }    });});
<script src=""></script><select id="type">    <option value="item0">--Select an Item--</option>    <option value="item1">item1</option>    <option value="item2">item2</option>    <option value="item3">item3</option></select>
<select id="size"> <option value="">-- select one -- </option></select>

Select options based on another option selected

Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.

$(document).ready(function() {
$('select#DynamicField_QueueNote').change(function() {
<script src=""></script>

<select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
<option value="">-</option>
<option value="- Move -" selected="selected">- Move -</option>
<option value="Field_Support" data-link='94' data-subject='Nota para Field'>Field_Support</option>
<option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
<option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate Validate_Required" aria-required="true">

<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
<div class="InputField_Container" tabindex="-1">
<div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
<select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
<option value="">-</option>
<option value="71">1ª_Tentativa_Contacto</option>
<option value="72">2ª_Tentativa_Contacto</option>
<option value="73">3ª_Tentativa_Contacto</option>
<option value="80">Acesso_VPN_atribuido</option>
<option value="94">dados_para_field</option>
<p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>


<select id='select1'>
<option> Choose...</option>
<option value='option1' data-link='100'> Option 1 (link to 100)</option>
<option value='option2' data-link='133'> Option 2 (link to 133)</option>
<option value='option3' data-link='94'> Option 3 (link to 94)</option>
<option value='option4' data-link='120'> Option 4 (link to 120)</option>

<select id='select2'>
<option value='94'>Template 94</option>
<option value='100'>Template 100</option>
<option value='120'>Template 120</option>
<option value='133'>Template 133</option>
</select> -->

how to change value of select options based on another select option selected?

Successfully Done...

Ajax function =>

$(document).ready(function () {
$('#location').on('change', function () {
var location_id = $(this).val();

if (location_id == '') {
$('#fees').prop('disabled', true);
} else {
$('#fees').prop('disabled', false);
url: "<?php echo $base_url;?>welcome/getFeePeriod",
type: 'POST',
data: {location: location_id},
dataType: 'json',
success: function (data) {
error: function () {
alert("Error Accured...");

Controller function =>

public function getFeePeriod()
$location_id = $this->input->post('location');
$FeesPeriod = $this->admin_model->getFeePeriod($location_id);
if (count($FeesPeriod)>0) {
$fee_select_box = '';
$fee_select_box .= '<option id="">Select Fee Period</option>';
foreach ($FeesPeriod as $fees) {
$fee_select_box .= '<option id="' . $fees->admission_fee_1 . '">Monthly</option>+
<option id="' . $fees->admission_fee_3 . '">Quarterly</option>+
<option id="' . $fees->admission_fee_6 . '">Half Yearly</option>+
<option id="' . $fees->admission_fee_12 . '">Yearly</option>';
echo json_encode($fee_select_box);

model function =>

function getFeePeriod($location_id){
$query = $this->db->get_where('location', array('id'=>$location_id));
return $query->result();

Thanks everyone for their response...

Change select options based on another selected option

I don't know if i understand you perfectly, but do you want something like this?

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">

<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
<option selected>Choose...</option>
<option value="Sem1">Sem1</option>
<option value="Sem2">Sem2</option>
<option value="Sem3">Sem3</option>
<label for="inputGroupSelect01">Semester</label>
<div class="col-md">
<div class="form-floating">
<select id="genDropdown" class="form-select" id="Sub1" required>
<option selected>Choose a sem...</option>

<label for="inputGroupSelect01">Subject Name</label>
function doHTML(list){
let string ="";
let index = 0;
list.forEach(element => {
string += `<option value="sub${index}">${element}</option>`;

return string;
function dynamicdropdown(sem){
let subjects1 = ["Applied Maths-1", "Applied Physics-1"];
let subjects2 = ["Applied Maths-2", "Applied Physics-2"];
let subjects3 = ["Applied Maths-3", "Applied Physics-3"];
let genDropdown = document.getElementById("genDropdown");
genDropdown.innerHTML = doHTML(subjects1);
genDropdown.innerHTML = doHTML(subjects2);
genDropdown.innerHTML = doHTML(subjects3);


how to change a selections options based on another select option selected (Array)?

Try This

/// inside your foreach loop

<select id="main[{{$user->id}}]" class="main">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>

<select id='sub[{{$user->id}}]' class='sub'>
<option value="1">1</option>
<option value="2">2</option>

/// exit foreach loop

$('.main').change(function() {
var options = '';
if($(this).val() == 'a') {
options = '<option value="1">1</option>';
else if ($(this).val() == 'b'){
options = '<option value="2">2</option>';


Change select box value depending other selected option box

There you go with DEMO

var options=""; //store the dynamic options
$("#gender").on('change',function(){ //add a change event handler to gender select
var value=$(this).val(); //get its selected value
options="<option>Select Your Name</option>"
if(value=="Male") //value ==Male then set male required options
options+="<option value='Male1'>Male 1</option>"
+"<option value='Male2'>Male 2</option>";
else if(value=="Female") //else set female required options
options+='<option value="female1">Female 1</option>'
+'<option value="female2">Female 2</option>';
$("#name").find('option').remove() //if first default text option is selected empty the select

Change bootstrap multiselect values based on another select options, using jquery

Finally I figure out I can't working with Bootstrap multi-select. That because of it won't let custom JS code replace it's current options in select elements. Otherwise bootstrap-multiselect is a great way to create checkboxes in select elements. There may be a way to override that. But I'm unable to find a way to do that. However I found a another method to fulfill my needs without using Bootstrap multi-select and select element. This answer contains several code lines of multiple stackoverflow answers.

Those answers are,

  • How to create checkbox inside dropdown?
  • How to replace all the <li> elements of an <ul> using JQuery?


First I replace the select element with ul list element as shown in below code.

<div class="d-flex flex-column">
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
<div class="d-flex flex-column">
<select name="hotel" class="hotel" id="hotel-selection">
<option selected="selected" value="">Select Hotel</option>
<div class="d-flex flex-column">
<div id="list1" class="dropdown-check-list">
<label>Select Tours</label>
<span class="anchor">Select Tours</span>
<ul class="tours" id="tour-list">


CSS code for dropdown.

.dropdown-check-list {
display: inline-block;

.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;

.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);

.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;

.dropdown-check-list {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;

.dropdown-check-list li {
list-style: none;

.dropdown-check-list.visible .anchor {
color: #0094ff;

.dropdown-check-list.visible .tours {
display: block;

JS and JQuery

var city1Tours = ["c1 Tour1","c1 Tour2"];
var city2Tours = ["c2 Tour1","c2 Tour2"];

var city1Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 1 Hotel 1">City 1 Hotel 1</option>';
var city2Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 2 Hotel 1">City 1 Hotel 1</option>';

//tour list dropdown js code
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))

//hotel selection based on user city decision js code
if($(this).val()=="City 1"){
//Tour selection based on the city
$("#tour-list").empty();//This line clears current li contents
$.each(city1Tours, function( key, value ) {
$('#tour-list').append('<li>' + '<input type="checkbox" />' + value + '</li>');

}else if($(this).val()=="City 2"){
//Tour selection based on the city
$("#tour-list").empty();//This line clears current li contents
$.each(city2Tours, function( key, value ) {
$('#tour-list').append('<li>' + '<input type="checkbox" />' + value + '</li>');

Hope this answer helps someone in future.

enable / disable options based on another select option

Using a data-* attribute and the dataset property... Your code could be a lot more concise.

let gradeSelect = document.querySelector('.grade_level')
document.getElementById('level').onchange = function() {
let level = this.value;

gradeSelect.querySelectorAll('option[value]').forEach(function(option) {
option.disabled = !(level === option.dataset.level)
// Sets the first one (Choose Grade Level) selected
gradeSelect.querySelector('option').selected = true
<select name="level" id="level" autofocus>
<option selected disabled>Choose</option>
<option value="Junior">Junior</option>
<option value="Senior">Senior</option>

<select name="grade_level" class="grade_level">
<option selected disabled>Choose Grade Level</option>
<option value="Grade 7" data-level="Junior">Grade 7</option>
<option value="Grade 8" data-level="Junior">Grade 8</option>
<option value="Grade 9" data-level="Junior">Grade 9</option>
<option value="Grade 10" data-level="Junior">Grade 10</option>
<option value="Grade 11" data-level="Senior">Grade 11</option>
<option value="Grade 12" data-level="Senior">Grade 12</option>

Related Topics

Leave a reply