如何使用jQuery从DropDownList元素中选择一个值?

时间:2015-06-16 16:16:49

标签: jquery sharepoint-2010 html-select

在我的Sharepoint页面中,我动态创建下拉列表,如下所示:

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"));

在我的.ascx文件中,我有以下jQuery将值设置为当前值作为这些值的默认/起点:

$(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);
});

这段代码非常漂亮(没有评论),这段代码不起作用:默认显示的日期是2014年1月1日(今天是2015年6月16日) 。我错过了什么或做错了什么?

注意:相同的基本代码(但使用'文本框'组合框')可以正常使用here

更新

对于Satpal,我猜测,我是来自土星的朋友,这里是相应生成的HTML,事实证明,这是他的一个很好的想法和我的坏人(因为没有记住Sharepoint的ID) (我猜SP是罪魁祸首)是"一堆泥"其次是我提供的ID。所以我必须找到以我提供的价值结束的ID,而不仅仅是我的价值。无论如何,这里和#39;生成的HTML:

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>

更新2

我添加了简化版AmmarCSE的代码段here

......但它仍然无法运作。 &#34;组合框&#34; /&#34;下拉列表&#34;已创建,但设置其val不会选择它。

更新3

就像在jQuery中一样,ready()函数对于我动态创建的控件来说太快了(我认为这是问题,无论如何),我最后只是设置了C#/服务器端的val,就像这样:

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++;
}

1 个答案:

答案 0 :(得分:1)

由于ID由sharepoint生成,因此您可以使用ends with选择器定位select元素

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

<强>更新

您试图将月份下拉列表设置为字符串值。它必须是月份的整数版本,因为它的选项值是整数形式(尽管它们是字符串)

$(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>