-2

美好的一天人们。我是 JavaScript 和 JQuery 的新手，我有疑问。伙计们怎么能把太多的脚本放在一起？？？？我有一个日期选择器脚本：

 $.datepicker.setDefaults($.datepicker.regional["ru"]);



 $("#dateinput").datepicker({
                        dateFormat: "yy-mm-dd",
                        beforeShowDay: beforeShowDayHandler,
                        showOn: 'both',
                        onClose: function (dateText, inst) {
                            $(this).attr("disabled", false);
                        },
                        beforeShow: function (input, inst) {
                            $(this).attr("disabled", true);
                        }

                    });

而且我还有另一个脚本实际上是作为插件的脚本，这个脚本让我可以一起使用输入和选择，所以如果用户无法从列表中找到一些东西，他可以放置他自己的数据，他只是从我的网页中找到的：

 jQuery(function ($) {
                                console.log($('.widthclass').select2_e().on('change', function () {
                                    alert(this.value);

                                }));
                            });              
                    });

和插件内部的代码，因为正如我所说，我像插件一样使用它：

//Plugin initialization
(function ($) {
    jQuery.fn.select2_e = function () {
        $(this).each(function (n, element) {
            //тут превращаем select в input              
            var $element = $(element),
                choices = $element.find('option').map(function (n, e) {
                    var $e = $(e);
                    return {
                        id: $e.val(),
                        text: $e.text()
                    };
                }),
                width = $element.width(),
                $input = $('<input>', {
                    width: width
                });
            $element.hide().after($input);
            //make select form input

            $input.select2({
                query: function (query) {
                    var data = {}, i;
                    data.results = [];

                    // add what we searched for

                    if (query.term !== "") {
                        data.results.push({
                            id: query.term,
                            text: query.term
                        });
                    }

                    // add other

                    for (i = 0; i < choices.length; i++) {
                        if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
                    }

                    query.callback(data);
                }
            }).on('change', function () {
                var value = $input.val();
                $element.empty();
                $element.append($('<option>').val(value));
                $element.val(value).trigger('change');
            });;
            return $element;
        });
        return this;
    }
})(jQuery);

和我的jsp一起看起来如何：

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title><spring:message code="label.input.head" var="headTitle"/></title>

    <script type="text/javascript" src="resources/jsFiles/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="resources/jsFiles/select2.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/select2.css"/>
    <script type="text/javascript" src="resources/jsFiles/select2_e.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/inputStyle.css"/>

    <script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
    <script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>

        <script type="text/javascript">

            $(document).ready(function() {  

                     $.datepicker.setDefaults($.datepicker.regional["ru"]);

                     $("#dateinput").datepicker({
                            dateFormat: "yy-mm-dd",
                            beforeShowDay: beforeShowDayHandler,
                            showOn: 'both',
                            onClose: function (dateText, inst) {
                                $(this).attr("disabled", false);
                            },
                            beforeShow: function (input, inst) {
                                $(this).attr("disabled", true);
                            }

                        });

                        function beforeShowDayHandler(date) {
                            if (self.SelectedDayValue != -1) {
                                if (date.getDate() != 1) {
                                    return [false, '', 'selected'];
                                }
                            }
                            return [true, ''];
                        }

                         jQuery(function ($) {
                                console.log($('.widthclass').select2_e().on('change', function () {
                                    alert(this.value);

                                }));
                            });              
                    }); 
             </script>

    </head>


    <body>

        <spring:message code="label.input.button" var="save"/>

        <table align="left">
            <tr> <td> Language/Язык/文 : <a href="input?lang=en">English</a>||<a href="input?lang=ru">Русский</a>||<a href="input?lang=cn">中文</a> </td> </tr>
        </table>

        <table align="right">
            <tr> <td> <button style="background-color: #E0E0E0; vertical-align: middle; border: thin;"> <img src="resources/log_out.png" alt="logout_logo" align="center" /> <a href="j_spring_security_logout"> <spring:message code="label.login.logout"/> </a> </button> </td> </tr>
        </table>

        <br/>

        <table align="center">
            <tr><td width="620"> <h3 align="left"> <select cssClass="widthclass"> <form:option value=""/> <options items="${listOfDates}"/> </select> </td></tr>
        </table>    

     <form action="add" method="post">  

        <table align="center"  style="border-bottom-style:inset; border-top-style: outset;">

        <tr><td align="right"> <input id=" </td> </tr>

因此，当用户单击输入字段时，我需要将它们放在一起打开选择和日期选择器。比你

4

1 回答 1

0

抱歉，我无法理解您的全部要求，但您可能正在寻找只需将日期选择器与此脚本集成。

嗯，我做了改变，希望你正在寻找这个。

jQuery(function ($) {
      $("#datepicker").datepicker({
                        dateFormat: "yy-mm-dd",
                       // beforeShowDay: beforeShowDayHandler,
                        showOn: 'both',
                        onClose: function (dateText, inst) {
                            $(this).attr("disabled", false);
                        },
                        beforeShow: function (input, inst) {
                            $(this).attr("disabled", true);
                        }

                    });

    console.log($('.testclass').select2_e().on('change', function () {
        alert(this.value)
    }));
});

演示

如果必须使用 jquery.ui 插件。可能是您尝试中的错误。

于 2013-08-05T04:14:52.837 回答