Add new dropdown option Jquery - javascript

I need to add new option in the select dropdown with jquery. For example I need to add: "--" in all three dropdown's after this: <option value="">-</option>. My code is:
<dd class="birth">
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<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>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<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>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>
</dd>


$('#idofselect').find('option:nth-child(1)').after('<option>--</option>')
$('#idofselect') -> Id of the select you want to add the option. If you want to add on all three you can use class that is common on
all three (added sample for class)
.find('option:nth-child(1)') -> look for the first option within the selected select
.after() -> Description: Insert content, specified by the
parameter, after each element in the set of matched elements.
$('.select').find('option:nth-child(1)').after('<option>--</option>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<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>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<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>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>


If you want to add option after first option then I think this will help.
$("select option").eq(0).after("<option>--</option")


Try this
$("select option").each(function(){
if(this.index == 0){
$(this).after("<option>--</option")
}
})


You can use this code:
$(function() {
$('.product-custom-option').find('option:nth-child(1)').after($('<option></option>').attr("value", '--').text('--'));
})
DEMO
'option:nth-child(1)' will select the first option child of select.
.after() will add whatever you write in it after the selected element.
.attr() will allow you to set the attributes of option.
.text() will allow you to add text to option field.

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 add the id from the certain div element in a javascript array?

<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</option>
<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>
</select>`enter code here`
</td>
<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</option>
<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>
</select> </td>
<td class="row" id="253">
<select class="available-room" style="" id="roomToBook">
<option value="0">Select</option>
<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>
</select> </td>
I have a three table cell having different id. Here i want to get the id when user select the option of respective id and add id in a array when user select the two or more then two option value from different table cell in a same time.
I have a javascript code also.It shows same id in alert frequently in every selection of option value of same id.Please someone help me.
$(document).ready(function() {
$(document).on('change', '.available-room', function () {
var room_id = new Array();
room_id.push($(this).parent('td').attr('id'));
alert(room_id);
});
});

You must declare id as unique in a file so you can get value by $(this).val() and array declaration var room_id = new Array() must be outside .on('change',function(){....});
<table>
<td class="row" id="roomToBook_1">
<select class="available-room" style="" id="roomToBook1">
<option value="0">Select</option>
<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>
</select>
</td>
<td class="row" id="roomToBook_2">
<select class="available-room" style="" id="roomToBook2">
<option value="0">Select</option>
<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>
</select> </td>
<td class="row" id="roomToBook_3">
<select class="available-room" style="" id="roomToBook3">
<option value="0">Select</option>
<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>
</select> </td>
</table>
<script>
$(document).ready(function () {
var room_id = new Array();
$(document).on('change', '.available-room', function () {
room_id.push($(this).val());
//alert(room_id);
alert(JSON.stringify(room_id));
});
});
</script>

Selecting through text in select_list not through index

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>

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

aligning HTML select elements on one line

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.

Categories