Develop Reference

How to bind fields dynamically to the Angular Controller?

My form has dropdown lists in the below fashion.
Main category : |Dropdown A|
First sun-category : |Dropdown B|
Second sub-category : |Dropdown C|
Based on |Dropdown C|futher I will populate dropdowns
dropdowns=|Dropdown e| |Dropdown f| |Dropdown g| and so on..
So, based on Dropdown C dropdowns will change.
I can bind Dropdown A| |Dropdown B| |Dropdown C| like this ng-model="main-category",ng-model="sub-category", & ng-model="sub-sub-category" respectively.
But how can I bind |Dropdown e| |Dropdown f| |Dropdown g| , because they keeps on changing whenever there Dropdown C changes?
Sample Code :
Main category:
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Sub-category
<select>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
</select>
Sub-sub category
<select>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
</select>
Based on sub-sub category selection I want to show/hide dropdowns.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
So, out of above mentioned, few dropdowns will be hidden/shown.
I am saying hidden/shown, because I don't know another way to manage this scenario.
Please help.

How to make multi level dropdown menu using select option mentod

i want to make multi level dropdown menu using select and option method
<select>
<option value="" data-display-text="Select">None</option>
<option value="oranges">SSC</option>
<option value="oranges">GATE</option>
<option value="bananas">BANK PO</option>
<option value="bananas">RAILWAY</option>
</select>

As far as I understand from your "multi level dropdown" concept, you can make a simple dropdown and just move some elements with CSS. Category name is stored in optgroup.
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
Update:
Or if you are trying to make a "chain" of dropdowns like you have in start menu in Windows, that is the easiest way to do it:
https://jqueryui.com/menu/

You can't make multiple levels with the select element.
In this case you would create a custom component with the capability to display something like 'hierarchic'.
Or use the trick like this:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>

If you want to use ONE select you could use <optgroup/>. See example.
Note: it's not very multi-level, but it allows for some kind of relevant grouping.
<select>
<option value="" selected="selected">Select an option...</option>
<optgroup label="SSC">
<option value="oranges1">some option</option>
<option value="oranges2">some option</option>
<option value="oranges3">some option</option>
</optgroup>
<optgroup label="GATE">
<option value="bananas1">some option</option>
<option value="bananas2">some option</option>
<option value="bananas3">some option</option>
</optgroup>
<optgroup label="BANK PO">
<option value="apples1">some option</option>
<option value="apples2">some option</option>
<option value="apples3">some option</option>
</optgroup>
<optgroup label="RAILWAY">
<option value="grapes1">some option</option>
<option value="grapes2">some option</option>
<option value="grapes3">some option</option>
</optgroup>
</select>

You can't make multiple levels with the select element.
Any ways, if its any help, there's
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Maybe this can insprire you even if not totally correctly interpreted by editors.
<div class="col-2 search-filter">
<select id="searchByYear" multiple="multiple" ng-model="varYear.value">
<option value="2023">2023
<option value="2023-H1">H1</option>
<option value="2023-H2">H2</option>
</option>
<option value="2022">2022
<option value="2022-H1">H1</option>
<option value="2022-H2">H2</option>
</option>
<option value="2021">2021
<option value="2021-H1">H1</option>
<option value="2021-H2">H2</option>
</option>
<option value="2020">2020
<option value="2020-H1">H1</option>
<option value="2020-H2">H2</option>
</option>
<option value="2019">2019
<option value="2019-H1" >H1</option>
<option value="2019-H2" >H2</option>
</option>
</select>
</div>

Dropdown flips up on resizing the browser(IE only)

I created a drop down as
<body>
<div style="height:200px"></div>
<form id="myForm">
<select style="margin-left:200px">
<option value="">Select a vehicle</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
which appears in Internet explorer as normal. That is on click, the dropdown flips down. But if we resize the browser window and click the dropdown, it flips up with the list starting from the top. Is there any css solution for making the dropdown always flips down. Or can we make it using javascript or jquery? And this problem is only with the Internet Explorer.

HTML drop down javascript help needed

I have two HTML drop down
<select>
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
Now, If I Select volvo from first drop down and b from second dropdown and then I change to Audi in the first dropdown, I want the value of second drop down to show Please Select instead of b (selected previously) using javascript
PS: I am new to Javascript

It's as easy as:
<select onChange="document.getElementById('secondOption').selectedIndex = 0;">
<option value="">Please Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="secondOption">
<option value="">Please Select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>

You can reset the index supposing you've two <select>
var selects = document.getElementsByTagName('select');
selects[0].onchange = function(){
selects[1].selectedIndex = 0;
}

dynamically selecting option values in option groups

How do i set the value of an option within an optgroup using DOM and vanilla javascript? Since there are multiple values of A, how do i select 20/A vs 30/A? with...
document.getElementById('logphase').value = "A";
... which would be called at window.onload
<select id="logphase">
<optgroup label="10">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="20">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="30">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>
<optgroup label="40">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</optgroup>