Angular ngFor select options with object value as default shown Ask Question

Let’s say I have an object one of statusOptions=[‘Approved’, ‘Waiting’, ‘Rejected’]

In the markup we have:

<div *ngFor="let myObject of objects">
    <select (change)="updateStatus($">
       <option selected>{{myObject.status}}</option>
       <option *ngFor="let status of statusOptions">{{status}}</option>

How would I show the object’s current status as the default selected value? As of right now it will duplicate and the dropdown will show ['Approved', 'Waiting', 'Rejected', 'Approved'] if the object’s current status is 'Approved'

I do not need two way binding as I just grab the value on change and update my database.

How to make a select list with multiple columns of options Ask Question

I am building a system that allows people to choose their own icons to go along with certain values. There are going to be many, many icons to choose from.

I would like to make a select box that has multiple columns with different options, because having a vertical list of 50+ icons would be absurd and not at all usable. I’ve found a lot of information on how to separate a single option into columns, but nothing that suggests that you could make a table-like arrangement of options. Is such a thing even possible? I’ve included a very quick mockup at the bottom of how I envision this looking to help clarify.

Here’s the basic HTML I’ve been playing with (no icons involved):

<select class="custom-select" size="10" name="selectIcon">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>

Image of basic idea

My select box is being narrowed to two entries when I need to show more Ask Question

The problem is that my select box items are being narrowed to 2 items

The selected item and all.

I need it to show all the items for

function filterTheData() {
        var selectionFilter = {
            Category: window.selectedCategory,
            Year: window.selectedYear,
            Group: window.selectedSubmenu

    if(isNaN(window.selectedYear)) {
        delete selectionFilter.Year

    if(window.selectedCategory === 'all') {
        delete selectionFilter.Category

    if(window.selectedSubmenu === 'all') {
        delete selectionFilter.Group

    window.filteredData = _.filter(, selectionFilter)
    delete selectionFilter.Year

    window.availableButtonYears = _.uniq(, selectionFilter), "Year"));
    window.availableCategory = _.uniq(, selectionFilter), "Category"));


function createComboBox() {
    console.log("inside combo");

    let availableCategory = window.availableButtonYears;
    $('#categorySelectBox option').remove();

    $('#categorySelectBox option').remove();
    let categories = "";

    if((window.selectedSubmenu === "all")&&(window.selectedYear === "all"))
        console.log("1st condition");
        categories =;

    if((window.selectedSubmenu === "all")&&(window.selectedYear !== "all"))
        console.log("2nd condition");
        categories = _.filter(window.filteredData, {
            Year: window.selectedYear

    if((window.selectedSubmenu !== "all")&&(window.selectedYear === "all"))
        console.log("3rd condition");
        categories = _.filter(window.filteredData, {
            Group: window.selectedSubmenu

    if((window.selectedSubmenu !== "all")&&(window.selectedYear !== "all"))
        console.log("4th condition");
        categories = _.filter(window.filteredData, {
            Group: window.selectedSubmenu,
            Year: window.selectedYear

    categories =, 'Category');
    categories = _.uniq(categories);
    categories = _.sortBy(categories)

    $('<option value="all">All</option>').appendTo('#categorySelectBox');
    _.each(categories, function(category) {
        var selected = '';

        var optionElement = $('<option />').val(category).text(category)

        if(category === window.selectedCategory) {
            optionElement.prop('selected', true)


After I select the an item from the select box, the data is filtered to 2 items.

I am sharing this screenshot to illustrate what I mean.
enter image description here

from console.log

There are 10 items in the list.

[object Array]
0 "Snapple"
1 "Family"
2 "General"
3 "Computer"
4 "Company"
5 "Other"
6 "Netflix"
7 "Keyboard"
8 "Mouse"
9 "iPhone"

The actual item names have been changed but this is similar.

How to disable values in a dropdown according to another dropdown Ask Question

I have two select dropdown. First one’s name is “minimumand the second one's name ismaximum` and both have a list of numbers from 1-25.

I want that is if I select any value from the minimum dropdown (e.g.: 4), the other maximum dropdown should allow me to select only those values which are equal or greater than the first dropdown value (e.g.: in this case values should be greater or equal to 4).

$(".selectClass").change(function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
<script src=""></script>
<select class="selectClass" id="min">
  <option value="">minimum</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
<select class="selectClass" id="max">
  <option value="">maximum</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>

How to make the Selected Option the width of the current Selected Option's text? Ask Question

I am trying to make the Select Option to have the width of the current Selected Option.

My code is the standard HTML for a Select Option dropdown:

<select name="search_options">
  <option value="all">All</option>
  <option value="entertainment">Entertainment</option>
  <option value="newsandpolitics">News &amp; Politics</option>
  <option value="sports">Sports</option>
  <option value="lifestyle">Lifestyle</option>
  <option value="health">Health</option>
  <option value="scienceandtech">Science &amp; Tech</option>

I have been trying to do this with just CSS or Javascript, with no JQuery, and I can’t figure it out.

I have found several fiddles with JQuery already, but no CSS/Javascript ones.

Is there any way to achieve this, identical with the above 2 fiddles, using just CSS or pure Javascript?

Any pointers in the right direction would be great.

Filter for list not working Ask Question

I want to make a filter for a list which only displays the elements of the list that match the value given in the <select> (“0” or “1”).

function filterElements() {
	var select = document.getElementById("select");
	var filter = select.value;
	var list = document.getElementById("listElements");
	var elements = list.getElementsByTagName("li");
	var valueElement;
	for (var i = 0; i < elements.length; i++) {
		valueElement = elements[i].value;
		console.log("filter : "+filter+" ; value : "+valueElement+" ; equal : "+(valueElement===filter));
		if (valueElement === filter)
           	elements[i].style.display = "";
		else elements[i].style.display = "none";
<select id="select" onchange="filterElements()">
	<option value="1">Value 1</option>
	<option value="0">Value 0</option>

<ul id="listElements">
	<li value="1">Element 1</li>
	<li value="0">Element 2</li>
	<li value="1">Element 3</li>
	<li value="0">Element 4</li>

how to create dynamic multi level dropdown in jquery Ask Question

i have dynamic json structure as mentioned below, need to fill tree like in the html drop down dynamically. there may be sub level, sub sub level, grand sub level ….


OrgID   OrgName        parentID
001    org1           0 -----th top
002    org2           0
003    org3           0
004    suborg1        001
005    suborg2       001
006    suborg1       002
007    subsuborg1    004 

like as above any number of levels need to be created

code which Im trying is able to display on screen using ul li,I need to display in dropdown list
javascript code:

    var menu = "<ul>";
    menu += fun_filldropdown(response, 0, menu);
    menu += "</ul>";

function fun_filldropdown(response, parentid,menu)

    var menu = "";      
    var filtered = $.grep(response, function (el) {
        return el.Record.parentid == parentid.toString();

    $.each(filtered, function(i, item) {

        if(item.Record.prefname !== undefined)
            menu += "<li>"+item.Record.prefname+"</li>";    

        if(response !== undefined)
        menu += "<ul>"+fun_filldropdown(response,item.Record.PrefcatID)+"</ul>";


    return menu;


Result Screenshot:

enter image description here

can someone help me in putting in dropdown?

Angular material mat-select: values are function with submit button Ask Question

In mat-select the values are functions report(),edit(),delete(), then when I click the submit button, the selected value (function) should run. How would I do it?

I am working for the delete() function for now, once I understand the flow, the rest will be easy for me.

component.html file

<ng-container matColumnDef="instrumentName">
   <mat-header-cell *matHeaderCellDef class="header-cell">Instrument Name</mat-header-cell>
   <mat-cell *matCellDef="let element" class="cell">{{ element.instrumentName }}</mat-cell>

<ng-container matColumnDef="manufacturer">
   <mat-header-cell *matHeaderCellDef class="header-cell">Manufacturer/Model</mat-header-cell>
   <mat-cell *matCellDef="let element" class="cell">{{ element.manufacturer }}</mat-cell>

<ng-container matColumnDef="_id">
   <mat-header-cell *matHeaderCellDef class="header-cell">Options</mat-header-cell>
      <mat-cell *matCellDef="let element" class="cell">
          <mat-select placeholder="options" [value]>
            <mat-option value="report()">Report</mat-option>
            <mat-option value="edit()">Edit</mat-option>
            <mat-option value="delete()">Delete</mat-option>
          <button class="submit-btn" mat-button type="submit">Submit</button>

component.ts file

delete(instrument: Instruments) {
      .subscribe(() => console.log('successfully deleted'));

component.service.ts file

deleteInstrument(instrument: Instruments) {
    return this.http.delete<Instruments>(`${this.apiBaseUrl}/equipment/${instrument._id}`);

How to style a select tag's option element? Ask Question

I’m trying to set the style of an option in a select dropdown menu in Google Chrome. It works in all browsers except IE9 and Chrome. {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>