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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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() {
    $('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
    $('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
    $('#Subject').val($(this).find('option:selected').data('subject'))
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate  Validate_Required" aria-required="true">

<hr>
<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>
  </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>
  </select>
  <p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>




<!--

<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>



<select id='select2'>
  <option></option>
  <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);
            $.ajax({
                url: "<?php echo $base_url;?>welcome/getFeePeriod",
                type: 'POST',
                data: {location: location_id},
                dataType: 'json',
                success: function (data) {
                    //alert("Ok");
                    $('#fees').html(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">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">

   </head>
  <body>
    <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>
    </select>
    <label for="inputGroupSelect01">Semester</label>
  </div>
</div>
<div class="col-md">
<div  class="form-floating">
  <select id="genDropdown" class="form-select" id="Sub1" required>
    <option  selected>Choose a sem...</option>

  </select>
  <label for="inputGroupSelect01">Subject Name</label>
  <script>
    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");
      if(sem=="Sem1"){
        genDropdown.innerHTML = doHTML(subjects1);
      }
      if(sem=="Sem2"){
        genDropdown.innerHTML = doHTML(subjects2);
      }
      if(sem=="Sem3"){
        genDropdown.innerHTML = doHTML(subjects3);
      }

    }
  </script>
     </body>
</html>

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>

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

/// exit foreach loop

<script>
    $('.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>';
        }

        $(this).next('.sub').html(options);
    });
</script>

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>";
        $("#name").html(options);
    }
    else if(value=="Female") //else set female required options
    {
        options+='<option value="female1">Female 1</option>'
                 +'<option value="female2">Female 2</option>';
        $("#name").html(options);
    }
    else
        $("#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?

HTML

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

<div class="d-flex flex-column">
    <label>City</label>
    <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>
    </select>
</div>
<div class="d-flex flex-column">
    <label>Hotel</label>
    <select name="hotel" class="hotel" id="hotel-selection">
        <option selected="selected" value="">Select Hotel</option>
    </select>
</div>
<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">
        </ul>
    </div>
</div>

CSS

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 ul.tours {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
}

.dropdown-check-list ul.tours 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'))
    checkList.classList.remove('visible');
else
    checkList.classList.add('visible');
}

//hotel selection based on user city decision js code
$(document).ready(function(){
    cityS.on('change',function(){
    if($(this).val()=="City 1"){
        hotelS.html(city1Hotels);
        //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"){
        hotelS.html(city2Hotels);
        //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>

<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>
</select>