Drop-Down Box Dependent on the Option Selected in Another Drop-Down Box

Drop-down box dependent on the option selected in another drop-down box

Try something like this... jsfiddle demo

HTML

<!-- Source: -->
<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

<!-- Status: -->
<select id="status" name="status">
    <option>OPEN</option>
    <option>DELIVERED</option>
</select>

JS

$(document).on('ready', function () {

    $("#source").on('change', function () {
        var el = $(this);
        if (el.val() === "ONLINE") {
            $("#status").append("<option>SHIPPED</option>");
        } else if (el.val() === "MANUAL") {
            $("#status option:last-child").remove();
        }
    });

});

Dynamically update a dropdown list based on another dropdown list?

You can use split(',') to split values then using for-loop you can get values from split array and finally use $("#beta option[value=" + vals + "]").show() to show options where values matches.

Demo Code:

$("#alpha").on("change", function() {
  var values = $(this).val().split(',') //split value which is selected
  $("#beta option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i++) {
    var vals = values[i]
    $("#beta option[value=" + vals + "]").show()//show that option

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<select class="browser-default" id="beta">
  <option selected="selected" value="">--select one-- </option>
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>

How do I make a dependent dropdown select menu choice show/hide another dropdown select menu using Javascript?

That is a short prototype on how to make your thing work :
check the js fiddle:
https://jsfiddle.net/yehiaawad/mun52n13/6/

When you select devices from services select

=> services-devices would display

=> when selecting Iphone from devices select

=>devices-iphones should be displayed and the rest would be hidden

(the same thing with IPad)

HTML:

<select name="service" id="service" class="service">
            <option>Select a Service</option>   
            <option value="screen" data-target="devices" id="screen">Screen Replacement</option>       
            <option value="comp" data-target="comp" id="comp">Computer Work</option> 
            <option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
        <select name="devices" id="devices" class="devices">
        <option>Select a device</option>       
        <option value="iphone" data-target="iphones" id="iphone">iPhone</option>       
        <option value="ipad"  data-target="ipads" id="ipad">iPad</option>
        <option value="android" id="android">Android</option>
        </select>
<div style="display:none" id="devices-iphones">
        <select name="iphone" id="iphone" class="iphone">
        <!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
        <!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
        <option></option>
        <option value="iphone6" id="iphone6">iPhone 6</option>
        <option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
        <option value="iphone5s" id="iphone5s">iPhone 5S</option>
        <option value="iphone5c" id="iphone5c">iPhone 5C</option>
        <option value="iphone5" id="iphone5">iPhone 5</option>
        <option value="iphone4s" id="iphone4s">iPhone 4S</option>
        <option value="iphone4" id="iphone4">iPhone 4</option>
        </select>
</div>
<div style="display:none" id="devices-ipads">
        <select name="ipad" id="ipad" class="ipad">
              <option></option>
        <option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
        <option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
        <option value="ipadair" id="ipadair">iPad Air</option>
        <option value="ipad4" id="ipad4">iPad 4</option>
        <option value="ipad3" id="ipad3">iPad 3</option>
        <option value="ipadmini" id="ipadmini">iPad Mini</option>
        <option value="ipad2" id="ipad2">iPad 2</option>
        </select>
</div>
</div>
<div style="display:none" id="service-comp">
        <select name="compwork" id="compwork" class="compwork">
        <option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
        <option value="desktopbuild" id="desktopbuild">Desktop Build</option>
        <option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
        <option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
        <option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
        <option value="virusremoval" id="virusremoval">Virus Removal</option>
        </select>
</div>
<div style="display:none" id="service-misc">
        <select name="miscellaneous" id="miscellaneous" class="miscellaneous">   
        <option value="networksecurity" id="networksecurity">Network Security</option> 
        <!--<option value="webdesign" id="webdesign">Website Design</option>-->
        </select>
</div>

Javascript:

$(document).ready(function(){
    $('select').on('change', function() {
       var target=$(this).find(":selected").attr("data-target");
       var id=$(this).attr("id");
       $("div[id^='"+id+"']").hide();
       $("#"+id+"-"+target).show();
    });
});

Make drop down list dependent on another drop down in MVC Core

asp-items relies on the server to parse, if the drop-down list is dynamically changed in this way, the client and the server need to maintain real-time interaction. So this method is impossible. You need to use jQuery.

When you see the page, asp-items have been parsed into html. At this time, html can be changed through jQuery.

<select name="make" asp-for="Make" asp-items="DropDowns.MakeList()"></select>
<select name="model" asp-for="Model" asp-items="DropDowns.ModelList()"></select>
@section Scripts{ 
<script>
    $(function () {
        let model = $('#Model').children()
        $('#Make').change(function () {
            let make = $(this).val()
            if (make == 'Ford') {
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(4).remove()
                $('#Model option').eq(3).remove()
            } else if (make == 'Toyota') {
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(2).remove()
                $('#Model option').eq(1).remove()
            }
        })
    })
</script>
}

how to make dependent another dropdown for filter in angular

I think I have a solution for you. You can do that on your change function.
Here is my sample code and stackblitz Demo link.

HTML:

<h1>Reactive forms SELECT-OPTIONS</h1>
<h2>Tracking simple string</h2>
<form [formGroup]="form">
    <label>Country:</label><br>
    <select formControlName="country" (change)="checkFirstDropdown($event.target.value)">
        <option *ngFor="let country of countries" [value]="country.id">
            {{ country.name }}
        </option>
    </select>
     <br>  <br>
     <label>City</label><br>
     <select formControlName="city" >
        <option *ngFor="let city of cities" [value]="city.id">
            {{ city.city }}
        </option>
    </select>
</form>

TS:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Country} from './country';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  countries = [
    {
      id: 'us',
      name: 'United States'
    },
    {
      id: 'uk',
      name: 'United Kingdom'
    },
    {
      id: 'ca',
      name: 'Canada'
    }
  ];

  cities=[];
  form = new FormGroup({
    country: new FormControl(),
    city: new FormControl()
  });
  
  checkFirstDropdown($event){
     this.cities=cityList.filter(c=>c.cid===$event);
      let  itm=this.cities[0];
      this.form.controls['city'].setValue(itm.id);
     console.log($event);
  }
}

export const cityList = [
  {
    id: "1",
    cid: 'ca',
    city: "toronto",
  },
  {
    id: "2",
     cid: 'ca',
    city: "Vancouver",
  
  },
  {
    id: "3",
    cid: 'us',
    city: "New York City",
  },
  {
    id: "4",
     cid: 'us',
    city: "Los Angeles",
  
  },
  {
    id: "5",
    cid: 'uk',
    city: "London",
  },
  {
    id: "6",
    cid: 'uk',
    city: "BRIGHTON",
  }
];

How can I modify this jQuery to dynamically show and hide dependent selection options in drop-down?

I don't know the context of this code so I have no idea, if this pattern of "nested" options and selects is the best solution. But here is my version of the javascript that seems to achieve what was asked in the question. I'll comment the relevant changes so my thought process is clear. I also added the css for a hide class, as that wasn't in the jsfiddle.

$(document).ready(function () {
    $("select").on('change', function () {
        var selClass = $(this).attr("class");
        var selName = $(this).attr("name");
        var selVal = $(this).children("option:selected").val();

        //Call the update function with the data of the changed Select
        updateRecursivly(selClass, selName, selVal);

        //Recursive function to update all selects, this allows for multiple "child" selects per select and an in theory infinite "tree" of selects
        function updateRecursivly(selClass, selName, selVal) {
            //Search "children" of the parent select
            var children = $("select." + selClass + "[data-parent='" + selName + "']");
            if (children.length) {
                children.each(function () {
                    //Hide all options in the "child" select
                    $(this).children("option[data-parent]").hide();
                    //if selVal is an empty string, the default option is selected and we should just hide the "child" select
                    if (selVal !== "") {
                        //Get all options that contain (*=) selVal in "data-parent"
                        var options = $(this).children("option[data-parent*='" + selVal + "']");
                        //If there are possible options show the select and the possible options. Else hide select
                        if (options.length) {
                            $(this).removeClass('hide');
                            options.show();
                        } else {
                            $(this).addClass('hide');
                        }
                    } else {
                        $(this).addClass('hide');
                    }
                    //If the select is updated, the options should be reset. Any selected is reset and the first is selected
                    //From here https://stackoverflow.com/a/16598989/14040328 this is apparently safer against reset events than other solutions
                    $(this).children("option:selected").prop("selected", false);
                    $(this).children("option:first").prop("selected", "selected");

                    //Get the name of the select
                    var childName = $(this).attr("name");

                    //Update the Child select
                    updateRecursivly(selClass, childName, "");
                });
            }
        }
    });
});

.hide {
  display: none;
}

I'm not sure if I overdid the comments or not, if anything is unclear feel free to comment.

Laravel 7: Dependent Select dropdown not showing

Actually,

var dpt_id = $(this).val();

Will return null as the element is a select input thus you will send department_id as null

Finally send null to request and get also null at response since null is not matched with any rows :)

So the first step is for you to get the value of the selected option by

var dpt_id = $(this).find(':selected').val()

It will return the value of the option which is selected

Secondly, Isn't it better to assign the designation id as option value instead the array index?

I assume you should use value.id instead using key

I think it helps you. And let me know the updates!

---

Related Topics