Based on the given selection i want to deaktivate the element(opt_hello_message_embed_color_title). Incase of the value NO the element should not be active. How can i realise that in javascript?
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
Just set the disabled property true to deactivate element
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.disabled = true;
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
Just a addon to Ahsan's answer.
If you want the button dropdown to disappear use this:-
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.style.display= "none";// to make the dropdown reappear use select.style.display= "block";
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
Related
]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 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
???
I am trying to set a hidden value depending on the values set for two different dropdown boxes.
Here is what I have so far, it is not working, I expect it to set the value of #bundle_option[5] to 4 when the dropdown #bundle-option-5-color is set to Black and #bundle-option-5-size is set to Child.
<script type='text/javascript'>
$j(document).ready(function() {
$j('#bundle-option-5-color').change(function() {
if ($j(this).find('option:selected').text() == 'Black' &&
$j('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$j('#bundle_option\\[5\\]').val('4');
}
});
});
</script>
HTML:
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">
Bind your function to the both change events:
$(document).ready(function() {
var fn = function() {
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
}
};
$('#bundle-option-5-color').change(fn);
$('#bundle-option-5-size').change(fn);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="text" value="" name="bundle_option[5]">
As mentioned in the comments you need to trigger your function for both option box change events. You can do that with this wildcard selector $('[id^=bundle-option-5]').change(function() {}).
Please find your code below and here at jsFiddle.
$(document).ready(function() {
$('[id^=bundle-option-5]').change(function() {
//console.log(this);
// size or color changed
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
alert('black and child chosen!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">
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
i am working on a mobile app using HTML/CSS/JavaScript. I have two select option (drop down menu), one for number of dates and the other one for number of years. I want to be able to see these select options in one line, but no matter what I do, I get a drop down menu (number of dates) on one line and on the next line I get the drop down menu for number of years. Below you can see my codes
<div data-role="controlgroup" data-type = "horizontal" >
<label for="select-choice-1" >Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select><br />
</div>
UPDATE:
I am testing these codes on Android browser using jQuery mobile framework.
Try floating both select tags left and adding a clear:both to the styling on the label. If you want the label above the two selects, just add a <br /> right below the label.
It would look something like
<label>Label Value</label>
<select>
<option>Etc...</option>
</select>
<select>
<option>Second select option...</option
</select>
and the CSS would be
label {
clear:both;
}
select {
float:left;
}
Also, as a heads-up, you end your second select tag before the first option tag, so they aren't included.
<select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. You need to get rid of the / right before the ending of the tag.
It's the width on the ui-select class that's causing your issue, Setting the width to auto should correct the issue. jQM adds a ton of extra markup for the look and feel on the page to be consistent across multiple devices. If you view the page source in a browser such as Chrome or FireFox you can see the extra elements. In your case you needed to modify the ui-select class as it has a width of 60% as the default.
Live Example:
http://jsfiddle.net/phillpafford/trdYP/47/
JS:
$('#select-choice-1').parent().parent().css('width','auto');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-inline="true">
<label for="select-choice-1" data-inline="true">Choose Expiry Date</label>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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="select-year" id="select-yaer" data-inline="true">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
</div>
If you make them both float left they will sit side by side, as long as their combined widths don't exceed the width of the container.