顯示以變量開頭的div

Question

我有一個下拉選擇器，它在選中時使用jquery顯示/隱藏div。

<select id="dropdown" name="dropdown" 
    onchange="refreshPage(this.value);"> 
    <option <?php if ($ap == 'ATL') print 'selected '; ?> value="ATL">Atlanta</option> 
    <option <?php if ($ap == 'MIA') print 'selected '; ?> value="MIA">Miami</option> 
    <option <?php if ($ap == 'MCO') print 'selected '; ?> value="MCO">Orlando</option> 
</select> 

在一個div，我有與母公司相同的字符開始如下

<div id="ATL"> 
    Atlanta 
    <div id="ATL1">Put output here</div> 
    <div id="ATL2">Put output here</div> 
    <div id="ATL3">Put output here</div> 
</div> 

<div id="MIA"> 
    Miami 
    <div id="MIA1">Put output here</div> 
    <div id="MIA2">Put output here</div> 
    <div id="MIA3">Put output here</div> 
</div> 

jQuery的，我用的是

<script> 
    $(document).ready(function() { 
     function showTab(name) { 
      newname = '#' + name ; 
      $('div').not(newname).hide(); 
      $(newname).show(); 
     } 

     $('#dropdown').change(function() { 
      showTab($(this).val()); 
     }); 

     showTab($('#dropdown').val()); 

    }); // this line was missing 
</script> 

的問題是，孩子的div當我做出選擇時，只會選擇主格。有沒有反正我可以在Jquery中的'name'之後包含通配符

newname = '#' + name ; 

這樣，任何以name開頭的東西都會顯示出來？

感謝

Answer 1

是的，你可以做到這一點是這樣的：

newname = '[id^="' + name + '"]'; 

，其選擇與指定屬性的元素（在這種情況下id）開始與你給定的字符串。你可以閱讀更多關於它的jQuery's Docs

Answer 2

你可以試試id^=，這將匹配的ID年初您指定的內容。對於你的情況，我相信它會看起來像：

$("[id^=" + name + "]") 

Answer 3

我的建議是使用類

<div id="MIA" class="MIA">Miami   
<div id="MIA1" class="MIA">Put output here</div> 
<div id="MIA2" class="MIA">Put output here</div> 
<div id="MIA3" class="MIA">Put output here</div> 
</div> 

和

newname = '.' + name ; 

Answer 4

我會做到這一點略有不同，僅隱藏選項卡容器基本上是，並不是所有的的divs。

<div id="tabs"> 
    <div id="ATL">Atlanta 
     <div id="ATL1">Put output here</div> 
     <div id="ATL2">Put output here</div> 
     <div id="ATL3">Put output here</div> 
    </div> 
    <div id="MIA">Miami 
     <div id="MIA1">Put output here</div> 
     <div id="MIA2">Put output here</div> 
     <div id="MIA3">Put output here</div> 
    </div> 
</div> 

...

function showTab(name) { 
    newname = '#' + name; 
    $('tabs > div').hide(); 
    $(newname).show(); 
} 

$(document).ready(function() { 
    $('#dropdown').change(function() { 
     showTab($(this).val()); 
    }); 
    showTab($('#dropdown').val()); 
});