在 rails 应用上使用 jQuery 隐藏和显示(或禁用启用)Select 字段
Using jQuery on rails app to hide and show (or disable enable) Select Fields
基本上我希望用户只select这些字段之一,所以在任何情况下都可以,也可以。
我如何编写 Jquery 代码,以便在其中任何一个字段的默认值发生变化时,另一个字段被隐藏或禁用?
谢谢
这是我的两个 select 字段:
<div class="control-group" id="sel1">
<%= f.label "Assigne", :class => 'control-label' %>
<div class="controls" id="sel1">
<%= f.select(:user_id, [['Team', 0]] + User.all.collect { |p| [p.email, p.id]}, :id => 'sel1') %>
</div>
</div>
<div class="control-group">
<%= f.label "Team", :class => 'control-label' %>
<div class="controls">
<%= f.select(:team_id, [['Department', 0]] + Team.all.collect { |p| [p.name, p.id]}, :id => 'sel2') %>
</div>
</div>
编辑:
我自己写的:
<script>
$(function(){
$('#sel1').on('change',
function(){
if ($('#sel1').has('option').length > 5)
{
$('#sel2').hide();
}
else
{
$('#sel2').show();
}
})
});
</script>
但是它不起作用,它只能这样工作:
<script>
$(function(){
$('#sel1').on('change',
function(){
$('#sel2').hide();
})
});
</script>
但是如果这个领域被推崇为无,我不会再展示它了。
有什么想法吗?
这假设您在页面上没有任何其他选择。如果你这样做,也许可以添加一个 class 像 mutually-exclusive-select
或父级 div 的东西。
$ ->
$selects = $('select') # or something more specific
$selects.on 'change', ->
$el = $(@)
if $el.val().length
$selects.not('#' + $el.attr('id')).attr('disabled', 'disabled')
else
$selects.removeAttr('disabled')
你需要这样的东西:
$('#sel1').on('change',
function(){
if ($('#sel1').find('option:selected').val() !== "")
{
$('#sel2').hide();
}
else
{
$('#sel2').show();
}
});
这是html来源:
<body>
<select id="sel1">
<option val=""></option>
<option val=0>0</option>
<option val=1>1</option>
</select>
<select id="sel2">
<option val=""></option>
<option val=0>0</option>
<option val=1>1</option>
</select>
</body>
您可以在此处观看实际操作:http://jsbin.com/bigasitibe/2/edit
基本上我希望用户只select这些字段之一,所以在任何情况下都可以,也可以。
我如何编写 Jquery 代码,以便在其中任何一个字段的默认值发生变化时,另一个字段被隐藏或禁用?
谢谢
这是我的两个 select 字段:
<div class="control-group" id="sel1">
<%= f.label "Assigne", :class => 'control-label' %>
<div class="controls" id="sel1">
<%= f.select(:user_id, [['Team', 0]] + User.all.collect { |p| [p.email, p.id]}, :id => 'sel1') %>
</div>
</div>
<div class="control-group">
<%= f.label "Team", :class => 'control-label' %>
<div class="controls">
<%= f.select(:team_id, [['Department', 0]] + Team.all.collect { |p| [p.name, p.id]}, :id => 'sel2') %>
</div>
</div>
编辑:
我自己写的:
<script>
$(function(){
$('#sel1').on('change',
function(){
if ($('#sel1').has('option').length > 5)
{
$('#sel2').hide();
}
else
{
$('#sel2').show();
}
})
});
</script>
但是它不起作用,它只能这样工作:
<script>
$(function(){
$('#sel1').on('change',
function(){
$('#sel2').hide();
})
});
</script>
但是如果这个领域被推崇为无,我不会再展示它了。
有什么想法吗?
这假设您在页面上没有任何其他选择。如果你这样做,也许可以添加一个 class 像 mutually-exclusive-select
或父级 div 的东西。
$ ->
$selects = $('select') # or something more specific
$selects.on 'change', ->
$el = $(@)
if $el.val().length
$selects.not('#' + $el.attr('id')).attr('disabled', 'disabled')
else
$selects.removeAttr('disabled')
你需要这样的东西:
$('#sel1').on('change',
function(){
if ($('#sel1').find('option:selected').val() !== "")
{
$('#sel2').hide();
}
else
{
$('#sel2').show();
}
});
这是html来源:
<body>
<select id="sel1">
<option val=""></option>
<option val=0>0</option>
<option val=1>1</option>
</select>
<select id="sel2">
<option val=""></option>
<option val=0>0</option>
<option val=1>1</option>
</select>
</body>
您可以在此处观看实际操作:http://jsbin.com/bigasitibe/2/edit