Question

我有两组字段可以为用户增加时间。我有用于选择类型的静态字段，我可以看到下拉列表运行正常。我还有另一组将根据用户输入动态创建的字段。这里的下拉列表无法正常工作。我可以提供输入数据，但是下拉列表无法正常工作。我尝试过的是

<form class="form-inline">
            <div class="form-group bfh-timepicker" data-mode="12h">
                <label class="col-md-4 control-label" for="starttime">Starttime</label>
                <div class="col-md-4">
                    <input type="time" class="form-control input-md" id="starttime0" placeholder="starttime"
                        required="">
                </div>
            </div>
            <div class="form-group bfh-timepicker">
                <label class="col-md-4 control-label" for="endtime">Endtime</label>
                <div class="col-md-4">
                    <input type="time" class="form-control input-md" id="endtime0" placeholder="endtime" id="time"
                        required="">
                </div>
            </div>
        </form>

脚本代码是

<script>
        $(document).ready(function () {
            $('#starttime0').timepicker({
                timeFormat: 'HH:mm',
                interval: 30,
                use24hours: true,
                scrollbar: true,
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#endtime0').timepicker({
                timeFormat: 'HH:mm',
                interval: 30,
                use24hours: true,
                scrollbar: true,
            });
        });
    </script>

上面的代码用于选择提交时间，这是静态时间。下面创建的代码是开始时间和结束时间的动态文件但是下拉菜单无法正常工作这是我的代码

<script>
        var count = 0;
        function addtextbox() {
            count++;
            var newTextBoxDiv = document.createElement('div');
            newTextBoxDiv.id = 'Tools';
            document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);

            newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
                '<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
                '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
            console.log("Iam count", count);
        };

        function removeTextArea(inputElement) {
            var el = inputElement;
            while (el.tagName != 'DIV') el = el.parentElement;
            el.parentElement.removeChild(el);
            count--;
        }

    </script>

脚本代码是

<script>
        function timePicker() 
        {
            timeFormat: 'HH:mm',
            interval: 30,
            use24hours: true,
            scrollbar: true,

        }
    </script>

我得到的是，动态时间选择器功能未显示下拉列表我需要的是添加动态字段时的下拉菜单。

Answer 1

在endtime上初始化时间选择器时，元素不存在

在您创建字段的函数中添加

$('#endtime0').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    use24hours: true,
    scrollbar: true,
});

创建元素后。

编辑：

function addtextbox() {
        count++;
        var newTextBoxDiv = document.createElement('div');
        newTextBoxDiv.id = 'Tools';
        document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);

        newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="starttime">Starttime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="starttime' + count + '" placeholder="starttime" required=""> </div></div>' +
            '<div class="form-group bfh-timepicker"><label class="col-md-4 control-label" for="endtime">Endtime</label><div class="col-md-4"><input type="time" class="form-control input-md" id="endtime' + count + '" placeholder="endtime" required=""></div></div></form>' +
            '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'
        console.log("Iam count", count);
       $('#Tools input').timepicker({
           timeFormat: 'HH:mm',
           interval: 30,
           use24hours: true,
           scrollbar: true,
       });

    };

这将初始化新创建的#Tools div中任何输入上的时间选择器。创建后会调用它，以便在初始化元素时该元素存在。

Answer 2

@奎师那大师

请尝试以下代码，使其正常工作：

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<title>TimePicker</title>
</head>
<body>
<div class="container">
  <h2>Time Picker</h2>
  <p>This example of time picker using bootstrap and jquery.</p>
  <form>
    <div class="form-group">
      <label for="starttime">Start Time:</label>
      <input type="text" class="form-control" id="starttime" readonly>
    </div>
    <div class="form-group">
      <label for="endtime">End Time:</label>
      <input type="text" class="form-control" id="endtitme" readonly>
    </div>
  </form>
</div>
<script>
$("#starttime").clockpicker({
   autoclose: true,
});
$("#endtitme").clockpicker({
   autoclose: true,
});
</script>
</body>
</html>

我希望以上代码对您有用。谢谢。

为动态时间选择器下拉菜单添加jquery函数

2 个答案: