We Keep Coding

how to convert date to date drop down and drop down could be separate day, month,year

]2
<p>
<label for="id_date_of_birth">Date of birth:</label>
<input type="date" name="date_of_birth" value="2019-06-14" id="id_date_of_birth">
</p>
i am getting data from database by using django and i am trying to show in drop down date but i am getting date table

In your Django form, set the widget for your DateField to the SelectDateWidget (import it from django.forms.widgets). Then you only need to do {{ form.date_of_birth }} in your template.
class ProfileUpdateView(UpdateView):
form_class = MyProfileForm
class MyProfileForm(forms.ModelForm):
class Meta:
model = Profile
widgets = {'date_of_birth': SelectDateWidget()}

You can split out the field into 3 parts (you'd need to get the day/month/year parts in django) into 3 select fields like this:
<p>
<label>Day:
<select name="day">
<option>1</option>
<option>2</option>
...
<option>31</option>
</select>
</label>
<label>Month:
<select name="month">
<option>1</option>
<option>2</option>
...
<option>12</option>
</select>
</label>
<label>Year:
<select name="year">
<option>1900</option>
<option>1901</option>
...
<option>3000</option>
</select>
</label>
But I would NOT recommend this. This makes entering dates harder (multiple clicks and scrolls), the user can't copy/paste dates, or choose from a visual calendar. You also need to add your own client side logic to ensure that the user doesn't pick dates like Feb 31st.

Are you looking for something like this?
If you are.. not a good idea <3
<select name='day'>
<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>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>
<select name='month'>
<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>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>
<select name='day'>
<option value='2019'>2019</option>
<option value='2018'>2018</option>
<option value='2017'>2017</option>
<option value='2016'>2016</option>
<option value='2015'>2015</option>
<option value='2014'>2014</option>
<option value='2013'>2013</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
<option value='2009'>2009</option>
<option value='2008'>2008</option>
<option value='2007'>2007</option>
<option value='2006'>2006</option>
<option value='2005'>2005</option>
<option value='2004'>2004</option>
<option value='2003'>2003</option>
<option value='2002'>2002</option>
<option value='2001'>2001</option>
<option value='2000'>2000</option>
<option value='1999'>1999</option>
<option value='1998'>1998</option>
<option value='1997'>1997</option>
<option value='1996'>1996</option>
<option value='1995'>1995</option>
<option value='1994'>1994</option>
<option value='1993'>1993</option>
<option value='1992'>1992</option>
<option value='1991'>1991</option>
<option value='1990'>1990</option>
</select>

How to Set a Dropdown Option Value by Id

<select id=workTypeSelection>
<option id="-1">-Select a Work Type-</option>
<option id="1">Common</option>
<option id="3">Computer Maintenance</option>
<option id="5">Facility Maintenance</option>
<option id="19">Furniture Move</option>
<option id="85">Global Work Type</option>
<option id="24">Lease Request</option>
<option id="21">Move Responsibility</option>
<option id="20">Purchase Request</option>
<option id="16">SLA Maintenance</option>
<option id="60">Test 123</option>
<option id="72">TEST J</option>
<option id="73">test jj</option>
<option id="65">TEST JOS</option>
</select>
How to Select "Test 123" as Currently selected option in The Dropdown list using jquery on page Ready using option id-> 60.

Try any from below,
$('select option[id="<your_value>"]').attr("selected",true)
$('#selectTagId option[id="<your_value>"]').attr("selected",true)
$('.selectTagClass option[id="<your_value>"]').attr("selected",true)

change select option by javascript

i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???

How to make select appear one after one in JS?

I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>

you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}

Center a drop-down select scroll bar to the selected item

I have a drop-down selector with a large amount of items. I want to center scroll the box when it gets opened to have the selected item centered in the middle of it.
Here's a picture to show what I want, except I'm looking to do this in a drop-down list selector.
Here's an example of the dropdown I'm using:
<select name="EndTime" id="endTime">
<option value="00:00">12:00am</option>
<option value="00:15">12:15am</option>
<option value="00:30">12:30am</option>
<option value="00:45">12:45am</option>
<option value="01:00">1:00am</option>
<option value="01:15">1:15am</option>
<option value="01:30">1:30am</option>
<option value="01:45">1:45am</option>
<option value="02:00">2:00am</option>
<option value="02:15">2:15am</option>
<option value="02:30">2:30am</option>
<option value="02:45">2:45am</option>
<option value="03:00">3:00am</option>
<option value="03:15">3:15am</option>
<option value="03:30">3:30am</option>
<option value="03:45">3:45am</option>
<option value="04:00">4:00am</option>
<option value="04:15">4:15am</option>
<option value="04:30">4:30am</option>
<option value="04:45">4:45am</option>
<option value="05:00">5:00am</option>
<option value="05:15">5:15am</option>
<option value="05:30">5:30am</option>
<option value="05:45">5:45am</option>
<option value="06:00">6:00am</option>
<option value="06:15">6:15am</option>
<option value="06:30">6:30am</option>
<option value="06:45">6:45am</option>
<option value="07:00">7:00am</option>
<option value="07:15">7:15am</option>
<option value="07:30">7:30am</option>
<option value="07:45">7:45am</option>
<option value="08:00">8:00am</option>
<option value="08:15">8:15am</option>
<option value="08:30">8:30am</option>
<option value="08:45">8:45am</option>
<option value="09:00">9:00am</option>
<option value="09:15">9:15am</option>
<option value="09:30">9:30am</option>
<option value="09:45">9:45am</option>
<option value="10:00">10:00am</option>
<option value="10:15">10:15am</option>
<option value="10:30">10:30am</option>
<option value="10:45">10:45am</option>
<option value="11:00">11:00am</option>
<option value="11:15">11:15am</option>
<option value="11:30">11:30am</option>
<option value="11:45">11:45am</option>
<option value="12:00">12:00pm</option>
<option value="12:15">12:15pm</option>
<option value="12:30">12:30pm</option>
<option value="12:45">12:45pm</option>
<option value="13:00">1:00pm</option>
<option value="13:15">1:15pm</option>
<option value="13:30">1:30pm</option>
<option value="13:45">1:45pm</option>
<option value="14:00">2:00pm</option>
<option value="14:15">2:15pm</option>
<option value="14:30">2:30pm</option>
<option value="14:45">2:45pm</option>
<option value="15:00">3:00pm</option>
<option value="15:15">3:15pm</option>
<option value="15:30">3:30pm</option>
<option value="15:45">3:45pm</option>
<option value="16:00">4:00pm</option>
<option value="16:15">4:15pm</option>
<option value="16:30">4:30pm</option>
<option value="16:45">4:45pm</option>
<option value="17:00">5:00pm</option>
<option value="17:15">5:15pm</option>
<option value="17:30">5:30pm</option>
<option value="17:45">5:45pm</option>
<option value="18:00" selected="selected">6:00pm</option>
<option value="18:15">6:15pm</option>
<option value="18:30">6:30pm</option>
<option value="18:45">6:45pm</option>
<option value="19:00">7:00pm</option>
<option value="19:15">7:15pm</option>
<option value="19:30">7:30pm</option>
<option value="19:45">7:45pm</option>
<option value="20:00">8:00pm</option>
<option value="20:15">8:15pm</option>
<option value="20:30">8:30pm</option>
<option value="20:45">8:45pm</option>
<option value="21:00">9:00pm</option>
<option value="21:15">9:15pm</option>
<option value="21:30">9:30pm</option>
<option value="21:45">9:45pm</option>
<option value="22:00">10:00pm</option>
<option value="22:15">10:15pm</option>
<option value="22:30">10:30pm</option>
<option value="22:45">10:45pm</option>
<option value="23:00">11:00pm</option>
<option value="23:15">11:15pm</option>
<option value="23:30">11:30pm</option>
<option value="23:45">11:45pm</option>
</select>

I'm sure there's a better way of doing this, but it does work
HERE
$('#listF').click(function() {
var n = 10;
var val = this.selectedIndex;
if ((this.selectedIndex < ($(this).find('option').length - n)) && (this.selectedIndex > n)) {
this.selectedIndex += n;
this.selectedIndex -= (2 * n);
this.selectedIndex += n;
} else {
this.selectedIndex = ((this.selectedIndex<n)?0:99);
this.selectedIndex = val;
}
});
Edit: Adding a check before updating the selectedIndex so that you can select the last n( 10 here) items as well.
Edit2: Fixing the bug pointed out by rolfv1

I made this small example to give you an idea how to do this, what you basically do is that you first select the item that will be at the bottom of the list when you have the desired item in the middle, so in your image, first select the item "T3", and then select the actual desired item, see this Fiddle as the example:
http://jsfiddle.net/rolfv1/RZeLN/1/
<form name="form">
<select size=6 name="list">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
<option value="m">m</option>
</select>
<input type="button" onclick="choose();" value="select" />
</form>
and the test function in this case is just:
function choose(){
document.form.list.value="k";
document.form.list.value="i";
}
Of course the script and everything would have to be adjusted to your needs, but it shows the idea I hope

So as I mentioned in my comment, I upgraded the script of tewathia a bit (so most credits go to him), so now the script works both when navigating up and down in the list, and it will always try to put the selected item as close to the center as possible:
$('#listF').click(function(){
var n = 10;
if(this.selectedIndex+n+1 > ($(this).find('option').length)){
n=$(this).find('option').length-this.selectedIndex-1;
}
if(this.selectedIndex < n){
n=this.selectedIndex;
}
this.selectedIndex-=n;
this.selectedIndex+=2*n;
this.selectedIndex-=n;
});