基于jQuery中的选择值显示表单字段

我想根据初始选择值的类来显示div id。理想情况下，所有div最初都会隐藏起来，并且只会显示与选择下拉菜单的类匹配的ID。因此，下面的选择A或D都会显示div ID a。基于jQuery中的选择值显示表单字段

我当前的代码看起来是这样的：`

<select name="milestone_tag" id="milestone_tag" 
    <option value="1" class="a">Selection A 
    <option value="2" class="b">Selection B</option> 
    <option value="3" class="a-b">Selection C</option> 
    <option value="4" class="a">Selection D</option> 
</select> 
<div id="a"> 
    <input name="milestone_a" /> 
</div> 
<div id="b"> 
    <input name="milestone_b" /> 
<div id="a-b"> 
    <input name="milestone_a" /> 
    <input name="milestone_b" /> 
</div> 

$('#milestone_tag').change(function() { 
$("#a,#b,#a-b").hide(); 
$($(this).find('option:selected').attr('class')).show(); 
});

任何帮助将不胜感激！

来源

2012-03-31 user882134

你只是路过你需要需要选择前缀它option的类名类型。在这种情况下，一个div的ID

你基本上做这个 $('a').show();当它需要$('#a').show();

$('#' + $(this).find('option:selected').attr('class')).show();

来源

2012-03-31 16:05:02 Trevor

丁...它完美的作品！ – user882134 2012-03-31 16:15:51

类别选择器看起来像这样.class而.attr()返回class没有.。因此，这条线：

$($(this).find('option:selected').attr('class')).show();

本来是这样工作的：

$("." + $(this).find('option:selected').attr('class')).show();

来源

2012-03-31 16:03:47

我会尝试的东西沿着线：

<select name="milestone_tag" id="milestone_tag"> 
    <option value="1" class="a">Selection A</option> 
    <option value="2" class="b">Selection B</option> 
    <option value="3" class="a-b">Selection C</option> 
    <option value="4" class="a">Selection D</option> 
</select> 
<div id="a" class="milestone"> 
    <input name="milestone_a" value="milestone a" /> 
</div> 
<div id="b" class="milestone"> 
    <input name="milestone_b" value="milestone b" /> 
</div> 
<div id="a-b" class="milestone"> 
    <input name="milestone_a" value="milestone a" /> 
    <input name="milestone_b" value="milestone b" /> 
</div> 

$(document).ready(function(){ 
    var $milestones = $(".milestone"), 
     $selector = $('#milestone_tag'); 

    $selector.change(function() { 
     var selected = $selector.find('option:selected').attr('class'); 

     $milestones.hide(); 
     $('#' + selected + '.milestone').show(); 
    }); 
});

http://jsfiddle.net/userdude/ScWVZ/1/

稍微更“复杂”的例子，首先测试并创建一个本地数据值w ith有关id选择器，逗号分隔，然后用于显示相关的元素。请注意使用（不存在的）c，并且a和b对于a-b的情况不重复。

http://jsfiddle.net/userdude/ScWVZ/3/

来源

2012-03-31 16:05:48

您需要添加的选择，让jQuery的知道，你希望它是A class或id因为.attr()不加选择，只有属性的值：

$('.' + $(this).find('option:selected').attr('class')).show();

对于id：

$('#' + $(this).find('option:selected').attr('id')).show();

希望这有助于。

来源

2012-03-31 16:07:27 Nathan

你忘了＃在你的选择器前面。很好的做法，锅jQuery代码在

$(document).ready

$(document).ready(function() { 
     $("#a,#b,#a-b").hide(); 
     $('#milestone_tag').change(function() { 
       $("#a,#b,#a-b").hide(); 
       var a = "#"+$(this).find('option:selected').attr('class'); 
       $(a).show(); 
     }); 
    });

jSFiddle

来源

2012-03-31 16:09:36

基于jQuery中的选择值显示表单字段

回答

相关问题