Selecting through text in select_list not through index

Selecting through text in select_list not through index - javascript

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>

Related

Change dropdown options using javascript on Apple.com SOLVE THIS LUNCH ON ME

Trying to change selected options using javascript, but for some reason doesn't work. Voyaged all over the internet to find a solution but couldn't find one. Help Needed !
To get the to Source code go to
https://www.apple.com/shop/trade-in, at
"Select your device to get a trade-in estimate"
Select Smartphone, Apple, iPhone XS MAX, Select Yes for good condition,
Select Box "Trade in for gift Card".
Then you should see a form field, and that darn default state option wont change for me dynamically, using javascript in the console.
Now try to change the state in console to MA (Massachusetts).
It is currently default 'state'.
First person to solve this lunch is on me, dropdown your PayPal email.
Or send your email address to arizona777#gmail.com. Thank you !
:)
Source Code :
<select aria-required="true" aria-describedby="tradeUp.shipping.moduleData.address-state-error"
aria-invalid="false" data-autom="address-field-state" value=""
data-recon-click="binding,actionClick,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseover="binding,actionMouseOver,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseout="binding,actionMouseOut,tradeUp.shipping.moduleData.address.state,binding"
data-recon-input="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-change="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusin="binding,setFocus,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusout="binding,clearFocus,tradeUp.shipping.moduleData.address.state,binding"
id="tradeUp.shipping.moduleData.address-state" required=""
class="form-dropdown form-dropdown-selectnone">
<option value="" selected="true">State</option>
<option value="AA">AA</option>
<option value="AE">AE</option>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="MP">MP</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PI">PI</option>
<option value="PR">PR</option>
<option value="PW">PW</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="US">US</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="VI">VI</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>

Edit:
I now managed to get to the dialog mentioned. If you execute the following in the console you should be able to change the state to 'MA'
ch=new MouseEvent('change', {view:window,bubbles:true});
s=document.getElementById('tradeUp.shipping.moduleData.address-state');
s.value='MA';
s.dispatchEvent(ch);
It looks like the bootstrap surroundings of the select box expect a change event, which we can generate with the above commands.
After some further testing I found that {bubbles:true} is sufficient as the "option" argument in the above code (you could leave out the view:window part).
In case you had problems in addressing the select element with its unusual id: you need to mask the . characters in it, since otherwise they would be interpreted as special characters indicating class identifiers. So, the selector for document.querySelector() needs to be something like '#tradeUp\\.shipping\\.moduleData\\.address-state'.
In some further lines below you will find a way of changing the current selection of the select element. In this case I changed it to 'MA'.
document.querySelector('#change').addEventListener('click',function(){
document.querySelector('#tradeUp\\.shipping\\.moduleData\\.address-state').innerHTML=
['abc','def','ghi','jki','lmn'].map(function(s){return '<option>'+s+'</option>';}).join('');
})
// in case you wanted to change the value of the
// select programmatically, do the following:
document.querySelector('#tradeUp\\.shipping\\.moduleData\\.address-state').value='MA';
<select aria-required="true" aria-describedby="tradeUp.shipping.moduleData.address-state-error"
aria-invalid="false" data-autom="address-field-state" value=""
data-recon-click="binding,actionClick,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseover="binding,actionMouseOver,tradeUp.shipping.moduleData.address.state,binding"
data-recon-mouseout="binding,actionMouseOut,tradeUp.shipping.moduleData.address.state,binding"
data-recon-input="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-change="binding,setValue,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusin="binding,setFocus,tradeUp.shipping.moduleData.address.state,binding"
data-recon-focusout="binding,clearFocus,tradeUp.shipping.moduleData.address.state,binding"
id="tradeUp.shipping.moduleData.address-state" required=""
class="form-dropdown form-dropdown-selectnone">
<option value="" selected="true">State</option><option value="AA">AA</option>
<option value="AE">AE</option>
<option value="AP">AP</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="MP">MP</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="PI">PI</option>
<option value="PR">PR</option>
<option value="PW">PW</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="US">US</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="VI">VI</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<button id="change">change options</button>

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
???

drop down + user input (text)

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

We Keep Coding

JavaScript is the programming language of the Web.

Selecting through text in select_list not through index - javascript

Related

Change dropdown options using javascript on Apple.com SOLVE THIS LUNCH ON ME

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

How to Set a Dropdown Option Value by Id

change select option by javascript

drop down + user input (text)

Categories

Resources