如何将 jQuery select2 库集成到 Symfony3 表单中?
How to integrate jQuery select2 library into a Symfony3 form?
我正在尝试手动将 jQuery select2
库集成到我的 Symfony 表单中,以替代我的 select 框。
按照我添加到页眉的手册:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
此外,我修改了我的表格 class,将 attr
添加到每个 select:
->add('kontoWinien', EntityType::class, array(
'class' => 'AppBundle\Entity\konto',
'attr' => array('class'=>'select2')
))
我修改的 Twig 模板:
{{ form_start(form) }}
<SCRIPT type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}
但是 select2 仍未加载。
HTML symfony3 生成的代码如下所示:
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
你能告诉我我做错了什么吗?
试试这个
<script type="text/javascript">
$('select').select2();
</script>
就像 fcpauldiaz 说的那样,您需要先加载 jquery。我加载了您的代码 jquery(以及一些选项,以便我们可以看到它的工作原理)并且运行良好。
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
我正在尝试手动将 jQuery select2
库集成到我的 Symfony 表单中,以替代我的 select 框。
按照我添加到页眉的手册:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
此外,我修改了我的表格 class,将 attr
添加到每个 select:
->add('kontoWinien', EntityType::class, array(
'class' => 'AppBundle\Entity\konto',
'attr' => array('class'=>'select2')
))
我修改的 Twig 模板:
{{ form_start(form) }}
<SCRIPT type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}
但是 select2 仍未加载。
HTML symfony3 生成的代码如下所示:
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
你能告诉我我做错了什么吗?
试试这个
<script type="text/javascript">
$('select').select2();
</script>
就像 fcpauldiaz 说的那样,您需要先加载 jquery。我加载了您的代码 jquery(以及一些选项,以便我们可以看到它的工作原理)并且运行良好。
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>