Search code examples
jquerysharepoint-2010html-select

How can I select a value from a DropDownList element using jQuery?

In my Sharepoint page, I'm dynamically creating dropdownlists like so:

ddlDepartureDateMonth = new DropDownList();
ddlDepartureDateMonth.ID = "departurDateMonth";
ddlDepartureDateMonth.CssClass = "finaff-webform-field-input";
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Jan", "1"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Feb", "2"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Mar", "3"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Apr", "4"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("May", "5"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Jun", "6"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Jul", "7"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Aug", "8"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Sep", "9"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Oct", "10"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Nov", "11"));
ddlDepartureDateMonth.Items.Add(new System.Web.UI.WebControls.ListItem("Dec", "12"));
cellTxtbx_DepartureDateMonth.Controls.Add(ddlDepartureDateMonth);

ddlDepartureDateDayOfMonth = new DropDownList();
ddlDepartureDateDayOfMonth.ID = "ddlDepartureDateDayOfMonth";
ddlDepartureDateDayOfMonth.CssClass = "finaff-webform-field-input";
ddlDepartureDateDayOfMonth.Items.Add(new System.Web.UI.WebControls.ListItem("1", "1"));
ddlDepartureDateDayOfMonth.Items.Add(new System.Web.UI.WebControls.ListItem("2", "2"));
. . .
ddlDepartureDateDayOfMonth.Items.Add(new System.Web.UI.WebControls.ListItem("31", "31"));
cellTxtbx_DepartureDateDay.Controls.Add(ddlDepartureDateDayOfMonth);

ddlDepartureDateYear = new DropDownList();
ddlDepartureDateYear.CssClass = "finaff-webform-field-input";
ddlDepartureDateYear.ID = "departureDateYear";
ddlDepartureDateYear.Items.Add(new System.Web.UI.WebControls.ListItem("2014", "2014"));
ddlDepartureDateYear.Items.Add(new System.Web.UI.WebControls.ListItem("2015", "2015"));

In my .ascx file, I've got the following jQuery to set the values to the current as a default/starting point for those values:

$(document).ready(function () {

    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var dayofmonth = now.getDate();

    var monthStr = 'unknown';
    if (month === 0) {
        monthStr = 'Jan';
    } else if (month === 1) {
        monthStr = 'Feb';
    } else if (month === 2) {
        monthStr = 'Mar';
    } else if (month === 3) {
        monthStr = 'Apr';
    } else if (month === 4) {
        monthStr = 'May';
    } else if (month === 5) {
        monthStr = 'Jun';
    } else if (month === 6) {
        monthStr = 'Jul';
    } else if (month === 7) {
        monthStr = 'Aug';
    } else if (month === 8) {
        monthStr = 'Sep';
    } else if (month === 9) {
        monthStr = 'Oct';
    } else if (month === 10) {
        monthStr = 'Nov';
    } else if (month === 11) {
        monthStr = 'Dec';
    }

    $("#departureDateMonth").val(monthStr);
    $("#departureDateDayOfMonth").val(dayofmonth);
    $("#departureDateYear").val(year);
});

As beautiful as this code is (no commentarios desde la galeria de los cacahuates, por favor), this code doesn't work: the date shown by default is January 1st of 2014 (today is June 16th, 2015). What am I missing or doing wrong?

Note: The same basic code (but working with 'textboxes' insted of 'comboboxes') works just fine here.

UPDATE

For Satpal, who is, I surmise, my pal from Saturn, here is the corresponding generated HTML which, it turns out, was a good thought by him and bad one by me (for having not remembered that the IDs that Sharepoint (I guess SP is the culprit) are "a pile of mud" followed by the ID I provided. So I have to find the ID that ends with the value I provided, not just my value. Anyway, here's the HTML generated:

td><span class="finaff-webform-field-label" style="display:inline-block;width:132px;">Departure Date:</span></td>
                            <td><select name="ctl00$ctl24$g_114ffc7a_d31c_47f9_a313_a01101c93c52$ctl00$departurDateMonth" id="ctl00_ctl24_g_114ffc7a_d31c_47f9_a313_a01101c93c52_ctl00_departurDateMonth" class="finaff-webform-field-input">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>

                            </select></td>
                            <td><select name="ctl00$ctl24$g_114ffc7a_d31c_47f9_a313_a01101c93c52$ctl00$ddlDepartureDateDayOfMonth" id="ctl00_ctl24_g_114ffc7a_d31c_47f9_a313_a01101c93c52_ctl00_ddlDepartureDateDayOfMonth" class="finaff-webform-field-input">
                                <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></td>
                            <td><select name="ctl00$ctl24$g_114ffc7a_d31c_47f9_a313_a01101c93c52$ctl00$departureDateYear" id="ctl00_ctl24_g_114ffc7a_d31c_47f9_a313_a01101c93c52_ctl00_departureDateYear" class="finaff-webform-field-input">
                                <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>

UPDATE 2

I added a simplified version of AmmarCSE's snippet here.

...but it still doesn't work. The "combobox"/"dropdownlist" is created, but setting its val does not select it.

UPDATE 3

As in jQuery the ready() function fired too soon for my dynamically-created controls (I think that was the problem, anyway), I ended up just setting the vals in C#/server-side, like so:

DateTime now = DateTime.Now;
int month = now.Month;
ddlDepartureDateMonth.SelectedIndex = month - 1;

. . .

int dayOfMonth = now.Day;
ddlDepartureDateDayOfMonth.SelectedIndex = dayOfMonth - 1;

ddlDepartureDateYear = new DropDownList();
ddlDepartureDateYear.CssClass = "dplatypus-webform-field-input";
ddlDepartureDateYear.ID = "departureDateYear";
ddlDepartureDateYear.Items.Add(new System.Web.UI.WebControls.ListItem("2014", "2014"));
ddlDepartureDateYear.Items.Add(new System.Web.UI.WebControls.ListItem("2015", "2015"));

int year = now.Year;
ddlDepartureDateYear.SelectedIndex = (year - 2014);
// For 2016 and beyond: Always have the current year in the list, and any between the last hardcoded one (2015) and it:
int nextAdditionalYear = 2016;
while (year >= nextAdditionalYear)
{
    ddlDepartureDateYear.Items.Add(new System.Web.UI.WebControls.ListItem(nextAdditionalYear.ToString(), nextAdditionalYear.ToString()));
    nextAdditionalYear++;
}
Solution

  • Since the ids are generated by sharepoint, you can use the ends with selector to target the select elements

      $('[id$="departurDateMonth"]').val(month);
  $('[id$="DepartureDateDayOfMonth"]').val(dayofmonth);
  $('[id$="departureDateYear"]').val(year);

    Update

    You were trying to set the month dropdown to a string value. It needs to be the integer version of month since its option values are in integer form(although they are strings)

    $(document).on("change", '[id$=ckbxEmp]', function () {
    var ssnmaxlen = 4;
    var itinmaxlen = 12;
    var ssntextboxwidth = 40;
    var itintextboxwidth = 100;
    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    var $lbl = $('[id$=lblSSNOrITIN]');
    if (ckd) $input.data("oldValue", $input.val()); // Remember current value

    $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
        background: ckd ? 'yellow' : "lightgreen",
        width: ckd ? ssntextboxwidth : itintextboxwidth
    }).val(function (i, v) {
        // If checked, slice value to ssnmaxlen characters:
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });
    //$lbl.prop("content", ckd ? "SSN" : "ITIN");
    $lbl.text(ckd ? "SSN" : "ITIN");

});

$(document).on("keypress", '[id*=Float]', function (e) {
    //only allow 1..9 (48..57), '.' (46), and backspace (8)
    var k = e.which;
    console.log(k);
    if (k === 8 || k === 46) return;
    if (k < 48 || k > 57) {
        e.preventDefault();
    }
});

var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var dayofmonth = now.getDate();

var monthStr = 'unknown';
if (month === 0) {
    monthStr = 'Jan';
} else if (month === 1) {
    monthStr = 'Feb';
} else if (month === 2) {
    monthStr = 'Mar';
} else if (month === 3) {
    monthStr = 'Apr';
} else if (month === 4) {
    monthStr = 'May';
} else if (month === 5) {
    monthStr = 'Jun';
} else if (month === 6) {
    monthStr = 'Jul';
} else if (month === 7) {
    monthStr = 'Aug';
} else if (month === 8) {
    monthStr = 'Sep';
} else if (month === 9) {
    monthStr = 'Oct';
} else if (month === 10) {
    monthStr = 'Nov';
} else if (month === 11) {
    monthStr = 'Dec';
}

$("#bla").val((month+1));
$("#txtbxDayOfMonth").val(dayofmonth);
$("#txtbxYear").val(year);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="checkbox" id="ckbxEmp">Employee?
<input type="text" id="txtbxSSNOrITIN" maxlength="4" width="40">
<label id="lblSSNOrITIN">Bla</label>
</br>
<input type="text" id="txtbxFloat">
</br>
<input type="text" id="txtbxHopeFloats">
</br>
<input type="text" id="txtbxFloatingFreeAsABird">
</br>
</br>
<input type="text" id="txtbxMonth">
</br>
<input type="text" id="txtbxDayOfMonth">
</br>
<input type="text" id="txtbxYear">
    </br>
<input type="dropdownlist" id="ddl">
    
    <select name="bla" id="bla">
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>

</select>