Dynamic Drop Down Box

Dynamic generation of options in select box

Just create a private method that would set the products array based on the selectedProject and seletedProperty properties:

import { Component } from '@angular/core';

@Component({...})
export class AppComponent {

  selectedProject;
  selectedProperty;
  product;

  projects = [
    {
      key: 1, value: "Project one",
    },
    {
      key: 2, value: "Project two",
    },
    {
      key: 3, value: "Project three",
    }
  ]

  propertyCode = [
    {
      key: 101, value: "PC101",
    },
    {
      key: 102, value: "PC102",
    },
    {
      key: 103, value: "PC103",
    }
  ]

  changeProject() {
    this.setProducts();
  }

  changePropertyCode() {
    this.setProducts();
  }

  private setProducts() {
    if ((this.selectedProject === "Project two" && this.selectedProperty === 'PC103') || (this.selectedProject === "Project three" && this.selectedProperty === 'PC102')) {

      let potentialProduct = [
        {
          key: 123, value: `${this.selectedProperty}PROD123`,
        },
        {
          key: 456, value: `${this.selectedProperty}PROD456`,
        },
        {
          key: 789, value: `${this.selectedProperty}PROD789`,
        }
      ]

      this.product = potentialProduct;
    } else {
      this.product = [];
    }
  }

}

And then in your template, use the [(ngModel)] for projects and properties dropdowns:

<select 
  name="project" 
  [(ngModel)]="selectedProject" 
  (change)="changeProject($event)">
  <option 
    *ngFor="let opt of projects" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  [(ngModel)]="selectedProperty" 
  (change)="changePropertyCode($event)">
  <option 
    *ngFor="let opt of propertyCode" 
    [value]="opt.value">
    {{opt.value}}
  </option>
</select>
<br><br>

<select 
  name="project" 
  (change)="changeProductCode($event)">
  <option 
    *ngFor="let opt of product" 
    [value]="opt.key">
    {{opt.value}}
  </option>
</select>

Here's a Working Sample StackBlitz for your ref.

Excel: Dynamic dropdown list

You will need a helper column in which you put the formula that will return the correct list based on the choice then refer to that. There is no direct way(without vba) to do what you want from the existing list.

With Office 365

Use a helper column. In D2 I put =FILTER(A:A,B:B=G1)

Where G1 has the first drop down with the three roles.

Then in the data validation formula I put =D2#

Sample Image

Which gives me:

Sample Image

To make it a little more robust we can create three ranges that return each list.

I put the titles in D1:F1 and then used =FILTER($A:$A,$B:$B=D1)in D2 and drug it over to F2.

Sample Image

Then I create three named ranges. The name was the Role and the Formula was like =Sheet5!$D$2# respectively. I needed to add _ in place of the space.

Sample Image

Then in the formula for the data validation I used =INDIRECT(SUBSTITUTE($G1," ","_"))

Sample Image

That way I can now drag it down and it will refer to the cell in column G of the same row and change the list accordingly:

Sample Image

How to make dynamic drop down list?

You could try:

  1. Create a table with workers and name it "tblWorkers". For example purposes table range is Sheet1 A1:C5.
  2. Select the range you want to import the drop down list with the ID_WORKERS, Go Data, Data Tools tab, Data Validation, Allow:List & Source: =INDIRECT("tblWorkers[ID_WORKERS]").
    For example purposes range used is Sheet1 E2:E5.

  3. Formula for:

    FNAME:=IF(E2<>"",IFERROR(VLOOKUP(E2,tblWorkers[#All],COLUMN(tblWorkers[FNAME]),FALSE),"Not Matched"),"") For example purposes range is Sheet1 F2:F5

    LNAME:=IF(E2<>"",IFERROR(VLOOKUP(E2,tblWorkers[#All],COLUMN(tblWorkers[LNAME]),FALSE),"Not Matched"),"") For example purposes range is Sheet1 G2:G5

Image

Sample Image

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 to use DropDownButton for dynamic list in flutter?

late int selectedIndex;  //where I want to store the selected index
late String initialDropDownVal;
List<DropdownMenuItem<String>> dropdownItems = [];


excel = Excel.decodeBytes(bytes);
sheet = excel['Sheet1'];
for(int i = 1; i< sheet.maxCols; ++i){
   var cell = sheet.cell(CellIndex.indexByColumnRow(rowIndex: 0, columnIndex: i));
   String val = cell.value.toString(); 
   if(val=="null"){
        break;
   }else{
      if(i==1){
         initialDropDownVal = val;
      }
      var newItem = DropdownMenuItem(
         child: Text(val),
              value: val,
          );
       dropdownItems.add(newItem);
   }

}


DropdownButton(
 value: selectedVal,
 icon: const Icon(Icons.keyboard_arrow_down),
 items: dropdownItems,
 onChanged: (String? value){
      setState(() {
            initialDropDownVal = value!;
selectedIndex=dropdownItems.indexWhere((i)=>i.value==value);
       });
})

Dynamic dropdown selection for dynamic rows not just first row

  1. First of all, you are not allowed to use duplicate ID. You should use class instead. Check this answer Class vs ID.

  2. Secondly, I've changed your change event with .on('change') which will work for dynamically added select. Check this sample JQuery .on('change').

  3. Lastly, you don't want to select all select with class attribute-name, you need to find the select on that particular row. You can do this by using .closest('tr') selector to select the current row <tr> where the event happened, and then use **.find('.attribute-value')** which will traverse and find element with the class attribute-value`.

From the documentation:

  • The .closest selector traverses up the DOM to find the parent that matches the conditions.
  • The .find selector traverses down the DOM where the event occurred, that matches the conditions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="form_div">
        <table class="table table-hover text-nowrap" id="attribute_table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value</th>
                    <th colspan="1">Action</th>
                </tr>
            </thead>
            <tr id="row1">
                <td>
                    <select name='attribute_name' id='attribute_name' class='form-control attribute_name'>
                    <option value='0'></option>
                    <option value='Colour'>Colour</option>
                    <option value='Size'>Size</option>
                    </select>
                </td>
                <td>
                    <select name='attribute_id' id='attribute_value' class='form-control attribute_value'>
                    <option data-parent='0' value='0'></option>
                    <option data-parent='Colour' value='1'>Black</option>
                    <option data-parent='Colour' value='2'>Camo</option>
                    <option data-parent='Colour' value='3'>Purple</option>
                    <option data-parent='Size' value='4'>Small</option>
                    <option data-parent='Size' value='5'>Medium</option>
                    <option data-parent='Size' value='6'>Large</option>
                    </select>
                </td>
                <td><input class="btn btn-block btn-primary" type="button" onclick="add_attribute_row();" value="+"></td>
            </tr>
        </table>
    </div>
</div>
<script>
function add_attribute_row() {
    $rowno = $("#attribute_table tr").length;
    $("#attribute_table tr:last").after("<tr id='row" + $rowno + "'><td><select name='attribute_name' id='attribute_name' class='form-control attribute_name'><option value='0'></option><option value='Colour'>Colour</option><option value='Size'>Size</option></select></td><td><select name='attribute_id' id='attribute_value' class='form-control attribute_value'><option data-parent='0' value='0'></option><option data-parent='Colour' value='1'>Black</option><option data-parent='Colour' value='2'>Camo</option><option data-parent='Colour' value='3'>Purple</option><option data-parent='Size' value='4'>Small</option><option data-parent='Size' value='5'>Medium</option><option data-parent='Size' value='6'>Large</option></select></td><td><input class='btn btn-block btn-primary' type='button' value='-' onclick=del_att_row('row" + $rowno + "')></td></tr>");
}
function del_att_row(rowno) {
    $('#' + rowno).remove();
};
</script>
<script>
$(document).on('change', '.attribute_name', function () {
        var parent = $(this).val();  $(this).closest('tr').find('.attribute_value').children().each(function () {
            if ($(this).data('parent') != parent) {
                $(this).hide();
            } else
                $(this).show();
        });
    });
</script>

making drop down menu and tabs dynamic

You can try to pass a Dictionary<string, List<League>> to view,and get list from dictionary to pass it to partial view with leagueName.Here is a working demo:

action:

[HttpGet]
[Route("roster/basketball")]
public IActionResult GetBasketballRoster()
        {
            string[] leagueNames = new[]
            {
                "7and8",
                "9and10",
                "11and12"
            };
            Dictionary<string, List<League>> d = new Dictionary<string, List<League>>();
            foreach (var name in leagueNames)
            {
                List<League> bbLeagues = await db.Leagues
                .Where(l => l.sport == "Basketball")
                .Where(l => l.ageRange==name)
                .ToListAsync();

                foreach (League league in bbLeagues)
                {
                    List<MMLeagueParticipant> leagueParticipants = await db.Entry(league)
                        .Collection(l => l.allParticipants)
                        .Query() // <-- This is needed to allow for `Include()`
                        .Include(mmp => mmp.child)
                        .ToListAsync();
                }
                d.Add(name,bbLeagues);
            }
           
            return View(d);
        }

View:

@model Dictionary<string, List<League>>
<div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
            <nav>
                <ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
                    <li class="dropdown-menu">
                        <a class="dropdown-item nav-link" id="bbM7and8-tab" data-toggle="tab" href="#bbM7and8" role="tab" aria-controls="bbM7and8" aria-selected="false">7-8</a>
                        <a class="dropdown-item nav-link" id="bbM9and10-tab" data-toggle="tab" href="#bbM9and10" role="tab" aria-controls="bbM9and10" aria-selected="false">9-10</a>
                        <a class="dropdown-item nav-link" id="bbM11and12-tab" data-toggle="tab" href="#bbM11and12" role="tab" aria-controls="bbM11and12" aria-selected="false">11-12</a>
                    </li>
                </ul>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade" id="bbM7and8" role="tabpanel" aria-labelledby="bbM7and8-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["7and8"])
                    </div>
                </div>
                <div class="tab-pane fade" id="bbM9and10" role="tabpanel" aria-labelledby="bbM9and10-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["9and10"])
                    </div>
                </div>
                <div class="tab-pane fade" id="bbM11and12" role="tabpanel" aria-labelledby="bbM11and12-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["11and12"])
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</div>

How to update a dropdown list dynamically using JQuery?

Found the problem:

I had given id to the <select> tag and was adding the options to this tag.

 <select title="Select pickup city"  id="boardingDropdown">
    
 </select>

Instead, what I did was to create a <div> tag above the <select> tag, and append <select>, then <option> and then </select> from the jquery.

<div>
    <label>Boarding Point </label>
        <div id="boardingDropdown"></div>
</div>

Then in the jquery, I appended the <select> tag as well:

$.getJSON(busApi, function (boardingPoints) {
    let opt = '<select>';
        $.each(boardingPoints, function (index, value){
            opt += '<option value="' + index + '">' + value + '</option>';
        });
        opt += '</select';
        $("#boardingDropdown").append(opt);
});

Now it is working as expected. :)


Related Topics

Json Encode MySQL Results

Difference Between Public, Private, and Protected

How to Create Friendly Url in PHP

Using Braces With Dynamic Variable Names in PHP

Why Check Both Isset() and !Empty()

How Can One Use Multi Threading in PHP Applications

Formatting a Number With Leading Zeros in PHP

How to Secure Database Passwords in PHP

Split a Comma-Delimited String into an Array

When Should I Use 'Self' Over '$This'

How to Force File Download With PHP

How to Set Up File Permissions For Laravel

PHP: Return All Dates Between Two Dates in an Array

How to Access Object Properties With Names Like Integers or Invalid Property Names

Fatal Error: Allowed Memory Size of 134217728 Bytes Exhausted (Codeigniter + Xml-Rpc)

Saving Image from PHP Url

Fatal Error: Call to a Member Function Fetch_Assoc() on a Non-Object

Pass a PHP Array to a JavaScript Function


Leave a reply



Submit