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.
Related
i have group option like this:
<select name="cars" id="cars">
<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>
but i want to be it like menu
like this:
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>
i want to make multiple dropdown option value to be the same as dropdown value with id=monday on change function.
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
JS
$("#monday").change(function() {
$("#tuesday").value = $("#monday").value;
$("#wednesday").value = $("#monday").value;
});
i saw the example with assign dropdown name with array like name="dropdown[]", but i want to keep the id like i wrote. Thanks in advance
Here is how to sync any other to monday
$(function() {
$("#monday").on("change", function() { // or .sel for all
$(".sel").not(this).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
monday
<select class="sel" id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>tuesday
<select class="sel" id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
<br>
<br>wednesday
<select class="sel" id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
Nothing would happen when you have updated value property, which only works with DOM element. So use val() method for jQuery object, although you can combine selectors into one by separating them using a comma.
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
$("#monday").change(function() {
$("#tuesday,#wednesday").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
monday
<select id="monday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
tuesday
<select id="tuesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
wednesday
<select id="wednesday">
<option value=""></option>
<option value="00:00">00:00</option>
<option value="00:15">00:15</option>
<option value="00:30">00:30</option>
<option value="00:45">00:45</option>
<option value="01:00">01:00</option>
</select>
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.
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;
}