Question

我想知道使用像jQuery这样的东西是否可能。我看了一遍，但还没有找到解决方案。

我正在为我的项目使用MVC 3 / razor。我有jQuery 1.5.1。

我们想要一个下拉（选择）框，它会显示一些选项： - 每月 - 每年 - 每周 - 日期

如果用户选择“日期”，我想显示日历框，然后将所选日期记录为选择框中的值。如果他们再次单击选择框，则可以根据原始选择值更改值。

在我的项目中，同一页面上有几个这样的框。也许我可以通过类值将它们绑定到点击动作上？

我发现的最接近的请求是：jQuery ui.datepicker on 'select' element ......但是我还没有能够为我的项目工作。

感谢任何帮助。

更新我需要绑定的添加元素将动态插入到页面中。也许这就是我的挑战所在。

更新

这是我正在使用/搞乱的一些代码：

首先 - 我的代码是从模板动态添加的。我想要绑定的字段位于下方，可能会在整个页面中多次出现：

<td><select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked">
                <option value="month">Month</option>
                <option value="annual">Annual</option>
                <option value="date" class="datepick">Date</option>
                </select>
</td>

在主页面上，动态添加表单，我有以下内容尝试将datepicker添加到选项'date'。

$(".periodworked").live("change", function () {
    if ($(this).val() == "date") {
        alert("In... now how to throw date picker....");
    }
})

最后 - 将它绑定到相应的字段...有没有办法使用$（this）来处理，或者我是否必须想出其他方法来找到我选择的特定选择？

更新

感谢您的帮助 - 我设法让它发挥作用。我理解我的情况非常具体，但如果它能帮助其他任何人，那就是代码......

首先 - 通过CSS我使用颜色来隐藏表单字段（与表格相同的bg颜色 - 模拟MS Excel外观）。显示datepicker的输入字段的字体颜色使用相同的颜色来防止任何文本被看到（尽管如果在隐藏字段之前看到它只是一个闪烁）。

在我的模板中，我按如下方式修改了单元格：

<td><select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked add-date">
                <option value="month">Month</option>
                <option value="annual">Annual</option>
                <option value="date" class="datepick">Date</option>
                </select>
                <input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" /></td>

在我的主页中，我不得不做一些“有趣”的事情。这是代码：

$("select.add-date").live("change", function () {
    if ($(this).val() == "date") {
        //alert("In... now how to throw date picker....");         
        $(this).parents('td').find('input.datepicker').show();
        $(this).parents('td').find('input.datepicker').datepicker({
            onSelect: function (dateText, inst) {
                var opt = $('<option />').attr('value', dateText).attr('selected', 'selected').text(dateText);
                var select = $(this).parents('td').find('select.add-date');
                // NOTE: ommitted code to check if the date is already in the select     
                $(select).append(opt);
            }
        }).focus();
    } else {
        $(this).parents('td').find('input.datepicker').hide();
    }
});

$('input.datepicker.for-option').live('blur', function (dateText, inst) {     
    $(this).hide(); 
});

您会注意到我已将livepicker添加到live / change函数中的输入中。由于某种原因，这是唯一可行的方法（反对将datepicker放在实时之外）。这也允许我使用onSelect方法，该方法正确地从日历中提取所选值，而模糊不检索值并返回空白结果，无论出于何种原因。

我的模糊方法只是隐藏包含日历的输入字段。

这一切都运行正常 - 但在我的情况下，我通过复制表的第一行并将其附加到现有表来动态添加许多字段。除非你在该行中使用datepicker，否则一切正常。此时，将一个类和id分配给datepicker的输入对象，然后将其复制，并将所有内容搞砸。为了解决这个问题，我在insertRow函数中添加了一个方法，基本上删除了插入并重新编写它。上帝，我希望这是有道理的......代码：

    function addLines(formNum, lines) {
        for (var l = 0; l < lines; l++) {
            var table = document.getElementById("formTable_" + formNum);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for (var i = 0; i < colCount; i++) {
                var newcell = row.insertCell(i);

                if (table.rows[1].cells[i].innerHTML.search('name="PeriodWorked"') != -1) {
                    newcell.innerHTML = table.rows[1].cells[i].innerHTML.substr(0, table.rows[1].cells[i].innerHTML.search("<input"));
                    newcell.innerHTML = newcell.innerHTML +
                        '<input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" />';
                } else {
                    newcell.innerHTML = (table.rows[1].cells[i].innerHTML);//.replace(" hasDatepicker", "");
                }

                //newcell.childNodes[0].id = "f" + formNum + "_" + newcell.childNodes + (1 + parseInt(newcell.childNodes[0].id.substr(newcell.childNodes[0].id.lastIndexOf("_") + 1));

                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = "";
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        //resetDatePicker();
                        break;
//                  default:
//                      newcell.innerHTML = "";
//                      break;
                }
            }
        }
    }

再次 - 我感谢你的帮助！

选择下拉列表中的Datepicker

0 个答案: