I have following options in dropdown list.
<select>
<option value="FRUIT">FRUIT</option>
<option value="MANGO">MANGO</option>
<option value="APPLE">APPLE</option>
<option value="BANANA">BANANA</option>
<option value="GRADES">GRADES</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
I want to disable(readonly) FRUIT and GRADES permanently. How can I achieve this result using javascript ?
<select name="selectField"> <option value="FRUIT" disabled>FRUIT</option>
<option value="MANGO">
MANGO
</option>
<option value="APPLE">
APPLE
</option>
<option value="BANANA">BANANA</option>
<option value="GRADES" disabled>GRADES</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
hope so this one helps.just try this one!
You should use "disabled" attribute.
For example:
<option value="FRUIT" disabled>FRUIT</option>
<option value="GRADES" disabled>GRADES</option>
If you are using jQuery in your page, so follow the below codes:
<script>
function myFunction() {
document.getElementById("mySelect").disabled = true;
}
</script>
Your html code should be like:
<option id="mySelect" value="FRUIT" disabled>FRUIT</option>
<option id="mySelect" value="GRADES" disabled>GRADES</option>
You need to use optgroup inside select. The <optgroup> is used to group related options in a drop-down list. Chek this.
Your example should be like
optgroup[readonly] {
background-color: #eeeeee;
color: #555555;
}
<select>
<optgroup label="FRUIT" readonly="readonly">
<option value="MANGO">MANGO</option>
<option value="APPLE">APPLE</option>
<option value="BANANA">BANANA</option>
</optgroup>
<optgroup label="GRADES" disabled="disabled">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</optgroup>
</select>
Also readonly options are still submittable.
Related
I am making a piano website that makes random melodies based on their scales. But when I choose a certain key and/or scale and/or mode(different kind of scale), the dropdown doesn't update in JS.
JS Code:
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
console.log(specifiedNote, majorMinor, mode);
}, 4000);
HTML Code:
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
If you look at the console, you'll see the value is the same over 10
times, but the values in the drop downs are different. How do I fix this?
You must read the element again in the the interval function :
setInterval(()=>{
specifiedNote = document.querySelector('#keys').value;
majorMinor = document.querySelector('#types').value;
mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
You must be reading the value inside the timeout.
Or another method you can do is, make a change event handler for the selects instead of the setTimeout, so the functions work when the select boxes are changed, not periodically.
//Checking to see if it changes ever 4 seconds after I select a different value in the drop box
setInterval(()=>{
const specifiedNote = document.querySelector('#keys').value;
const majorMinor = document.querySelector('#types').value;
const mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
}, 4000);
<div class="keys">
<select name="keys" id="keys">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="types" id="types">
<option value="Major">Major</option>
<option value="Minor">Minor</option>
</select>
<select name="modes" id="modes">
<option value="None">None</option>
<option value="Dorian">Dorian</option>
<option value="Phrygian">Phrygian</option>
<option value="Lydian">Lydian</option>
<option value="Mixolydian">Mixolydian</option>
<option value="Aeolian">Aeolian</option>
<option value="Locrian">Locrian</option>
</select>
<select name="amount" id="amount">
<option value="4">4 Notes</option>
<option value="8">8 Notes</option>
<option value="16">16 Notes</option>
</select>
<button class="create">RELODY!</button>
</div>
Get Values Inside your set interval code like below.
setInterval(()=>{
let specifiedNote = document.querySelector('#keys').value;
let majorMinor = document.querySelector('#types').value;
let mode = document.querySelector('#modes').value;
console.log(specifiedNote, majorMinor, mode);
},
]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>
I am new to JavaScript,
I know how to select a select_list by
document.getElementById("entry_1000001").selectedIndex=2
But Is there any way available to select through text directly something like
document.getElementById("entry_1000001").select("Ruby")
HTML Element follows
<select name="entry.1000001" id="entry_1000001" aria-label="What language does Watir-WebDriver use? " aria-required="true" required=""><option value=""></option>
<option value="Java">Java</option> <option value="Ruby">Ruby</option> <option value="C#">C#</option> <option value="Clojure">Clojure</option> <option value="Python">Python</option></select>
document.getElementById("entry_1000001").value = "Ruby";
<select name="entry.1000001" id="entry_1000001">
<option value=""></option>
<option value="Java">Java</option>
<option value="Ruby">Ruby</option>
<option value="C#">C#</option>
<option value="Clojure">Clojure</option>
<option value="Python">Python</option>
</select>
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
???
Hi guys I've looked around and I haven't really gotten a really good answer on this.
So I have a drop down list that allows my users to pick which city they live in and stuff. However I want it so that that drop down has the ability to allow users to first type in their value first or select a value from the drop down.
Here is what I have so far:
<div class="atl_form_row">
<div class="atl_left"><span class="mandatory">*</span>
<label class="control-label atlFormLabel" for="Service City">Service City/County:</label>
</div>
<div class="atl_right">
<select id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</select>
</div>
</div>';
The new HTML5 <datalist> element is what you are looking for:
<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity">
<option value "" disabled selected>Select City/County</option>
<option value="Alpharetta">Alpharetta</option>
<option value="Atlanta">Atlanta</option>
<option value="Brookhaven">Brookhaven</option>
<option value="Chamblee">Chamblee</option>
<option value="Chattahoochee Hills">Chattahoochee Hills</option>
<option value="College Park">College Park</option>
<option value="Decatur">Decatur</option>
<option value="Douglasville">Douglasville</option>
<option value="Duluth">Duluth</option>
<option value="Dunwoody">Dunwoody</option>
<option value="East Point">East Point</option>
<option value="Fairburn">Fairburn</option>
<option value="Fulton County">Fulton County</option>
<option value="Hapeville">Hapeville</option>
<option value="Johns Creek">Johns Creek</option>
<option value="Marietta">Marietta</option>
<option value="Milton">Milton</option>
<option value="Mountain Park">Mountain Park</option>
<option value="Newnan">Newnan</option>
<option value="Palmetto">Palmetto</option>
<option value="Riverdale">Riverdale</option>
<option value="Roswell">Roswell</option>
<option value="Sandy Springs">Sandy Springs</option>
<option value="Smyrna">Smyrna</option>
<option value="Union City">Union City</option>
</datalist>
As the user types in the <input>, the options from the datalist drop down. Or, a double click makes the whole list drop, like a select.
See this JSFiddle for a demo