CODEWITHSUNDEEP
javascriptjquery
Robert
Robert

Reputation: 812

Add new dropdown option Jquery

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>

Upvotes: 1

Views: 135

Answers (4)

Shubham Khatri
Shubham Khatri

Reputation: 282030

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.

Upvotes: 0

guradio
guradio

Reputation: 15565

$('#idofselect').find('option:nth-child(1)').after('<option>--</option>')

  1. $('#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)
  2. .find('option:nth-child(1)') -> look for the first option within the selected select
  3. .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>

Upvotes: 2

Hasan Awada
Hasan Awada

Reputation: 56

Try this 

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

Upvotes: 0

Roli Agrawal
Roli Agrawal

Reputation: 2466

If you want to add option after first option then I think this will help.

$("select option").eq(0).after("<option>--</option")

Upvotes: 0

Related Questions