Symfony:Hide/Show 表单元素依赖于带有数据库条目的下拉选择
Symfony: Hide/Show form element dependent on dropdown selection with database entries
我希望我的标题是正确的:我有一个下拉菜单,它来自作为 EntityType 的表单,值来自实体 class。代码:
->add('type', EntityType::class, array(
'class' => 'DocumentBundle:DocumentType',
'label' => 'label.type',
'property' => 'translationKey',
'required' => true,
'multiple' => false,
'expanded' => false,
'empty_value' => 'label.select_type',
'choice_translation_domain' => 'Documents'
))
->add('vka_number', 'text', array(
'label' => 'label.vka_number',
'required' => false,
'translation_domain' => 'Documents'))
第二个是文本字段 (vka_number),我只想在从该下拉列表中选择特定值时显示它
在我的树枝模板中,我渲染了元素:
<div class="row">
<div class="col-md-6" id="documentDropdown">
{{ form_row(form.type) }}
</div>
<div class="col-md-6" id="vka">
{{ form_row(form.vka_number) }}
</div>
</div>
我在想 javascript 这样的函数:
<script>
$(document).ready(function(){
$('#documentDropdown').on('change', function(){
if (this.value == 'Contract')
{
$('#vka').show();
}
else {
$('#vka').hide();
}
});
});
</script>
但它不起作用,我认为这是因为它无法访问下拉列表中的值,因为它们不是硬编码的,而是数据库条目。
'Contract' 将是 "makes" vka_number 文本字段出现的条目 (id=1)。
我从 your previous question Sonja 复制了 html 代码,您似乎一直在问同样的问题。我在这个 jsfiddle 中使用了该代码:
https://jsfiddle.net/alvinbunk/to9qodwx/
您可以使用 jsfiddle 来试验您的 jQuery 代码以找出问题所在。如您所见,代码确实有效并且确实隐藏了 vka
id 分区。它确实与值来自数据库这一事实无关。确保您的 html 代码中的各种元素没有重复的 ID。在浏览器中使用 "view source" 查看呈现的代码。
顺便说一句,我在这个答案上至少花了 15 分钟,在另一个上也花了 15 - 30 分钟。请注意,Whosebug 上的人都很忙,能把你的问题问清楚就好了。
编辑 #2 - 基于评论
使用此 jQuery 代码:
<script>
$(document).ready(function(){
$('#documentDropdown').on('change', function(){
if (this.value == '1')
{
$('#vka').show();
}
else {
$('#vka').hide();
}
});
});
</script>
应该可以。
这是我的 javascript 函数,它最终解决了我的问题。
$(document).ready(function () {
$('#type ').change(function() {
if ($('select[id$="_type"]>option:selected').text() == "Contract") {
$('#vka_number ').show();
}
else {
$('#vka_number').hide();
}
});
});
我希望我的标题是正确的:我有一个下拉菜单,它来自作为 EntityType 的表单,值来自实体 class。代码:
->add('type', EntityType::class, array(
'class' => 'DocumentBundle:DocumentType',
'label' => 'label.type',
'property' => 'translationKey',
'required' => true,
'multiple' => false,
'expanded' => false,
'empty_value' => 'label.select_type',
'choice_translation_domain' => 'Documents'
))
->add('vka_number', 'text', array(
'label' => 'label.vka_number',
'required' => false,
'translation_domain' => 'Documents'))
第二个是文本字段 (vka_number),我只想在从该下拉列表中选择特定值时显示它 在我的树枝模板中,我渲染了元素:
<div class="row">
<div class="col-md-6" id="documentDropdown">
{{ form_row(form.type) }}
</div>
<div class="col-md-6" id="vka">
{{ form_row(form.vka_number) }}
</div>
</div>
我在想 javascript 这样的函数:
<script>
$(document).ready(function(){
$('#documentDropdown').on('change', function(){
if (this.value == 'Contract')
{
$('#vka').show();
}
else {
$('#vka').hide();
}
});
});
</script>
但它不起作用,我认为这是因为它无法访问下拉列表中的值,因为它们不是硬编码的,而是数据库条目。 'Contract' 将是 "makes" vka_number 文本字段出现的条目 (id=1)。
我从 your previous question Sonja 复制了 html 代码,您似乎一直在问同样的问题。我在这个 jsfiddle 中使用了该代码:
https://jsfiddle.net/alvinbunk/to9qodwx/
您可以使用 jsfiddle 来试验您的 jQuery 代码以找出问题所在。如您所见,代码确实有效并且确实隐藏了 vka
id 分区。它确实与值来自数据库这一事实无关。确保您的 html 代码中的各种元素没有重复的 ID。在浏览器中使用 "view source" 查看呈现的代码。
顺便说一句,我在这个答案上至少花了 15 分钟,在另一个上也花了 15 - 30 分钟。请注意,Whosebug 上的人都很忙,能把你的问题问清楚就好了。
编辑 #2 - 基于评论
使用此 jQuery 代码:
<script>
$(document).ready(function(){
$('#documentDropdown').on('change', function(){
if (this.value == '1')
{
$('#vka').show();
}
else {
$('#vka').hide();
}
});
});
</script>
应该可以。
这是我的 javascript 函数,它最终解决了我的问题。
$(document).ready(function () {
$('#type ').change(function() {
if ($('select[id$="_type"]>option:selected').text() == "Contract") {
$('#vka_number ').show();
}
else {
$('#vka_number').hide();
}
});
});