基於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中的選擇值顯示錶單字段

回答

相關問題