如何在select2中显示输入框?

时间:2017-08-22 06:14:08

标签: javascript typescript asp.net-core jquery-select2

我在asp.net核心工作。我正在使用打字稿。我正在使用select2选项。

HTML: -

<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>

脚本: -

<script>
  $(document).ready(function () {
     $(".js-example-basic-multiple").select2();
     });
  </script>

式: -

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

脚本: -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

这是我的代码。我得到这样的输出。

enter image description here

不显示输入框。我想这样:

enter image description here

当我在框中单击时,弹出窗口应如下所示:

enter image description here

我怎样才能实现它?

我在局部视图中编写了一个html和脚本代码。我在布局html文件中添加了一个css和js文件。

2 个答案:

答案 0 :(得分:0)

尝试以下示例。问题中的代码没有关闭&lt;脚本&gt; 标记。

import sys
import cv2
from PyQt5.QtCore import QThread, pyqtSignal, Qt
from PyQt5.QtGui import QPixmap, QImage
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
import datetime


class App(QWidget):
    def __init__(self):
        super().__init__()
        self.title = 'PyQt5 Video'
        self.left = 100
        self.top = 100
        self.width = 640
        self.height = 480
        self.initUI()

    def initUI(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.left, self.top, self.width, self.height)
        self.resize(1800, 1200)
        # create a label
        # create a label
        label = QLabel(self)
        label.move(280, 120)
        label.resize(640, 480)
        label1 = QLabel(self)
        label1.move(580, 620)
        self.th = Thread(self)
        self.th.changePixmap.connect(label.setPixmap)
        self.th.changeLabel.connect(label1.setText)
        self.th.start()

    def closeEvent(self, event):
        self.th.stop()
        QWidget.closeEvent(self, event)

class Thread(QThread):
    changePixmap = pyqtSignal(QPixmap)
    changeLabel = pyqtSignal(str)

    def __init__(self, parent=None):
        QThread.__init__(self, parent=parent)
        self.isRunning = True

    def run(self):
        cap = cv2.VideoCapture('a.mp4')

        while self.isRunning:

            ret, frame = cap.read()
            rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
            convertToQtFormat = QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QImage.Format_RGB888)
            convertToQtFormat = QPixmap.fromImage(convertToQtFormat)
            p = convertToQtFormat.scaled(640, 400, Qt.KeepAspectRatio)
            self.changePixmap.emit(p)
            now = datetime.datetime.now()
            sec = now.second
            self.changeLabel.emit(str(sec))

    def stop(self):
        self.isRunning = False
        self.quit()
        self.wait()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = App()
    ex.show()
    sys.exit(app.exec_())

答案 1 :(得分:0)

这里工作正常,

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	</head>
	<body>
		<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
            <option value="AL">Alabama</option>
            <option value="Am">Amalapuram</option>
            <option value="An">Anakapalli</option>
            <option value="Ak">Akkayapalem</option>
            <option value="WY">Wyoming</option>
        </select>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script>
        
    $(document).ready(function () {
        $(".js-example-basic-multiple").select2();
    });
    </script>
</html>