1

我有一个下拉选择器，它使用 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 以与父级相同的字符开头，如下所示

<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 行中的“名称”之后包含一个通配符

 newname = '#' + name ;

以便显示以名称开头的任何内容？

谢谢

4

4 回答 4

1

是的，你可以这样做：

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

它选择从给定字符串开始的具有指定属性（在本例中id）的元素。你可以在jQuery's Docs上阅读更多关于它的信息

于 2013-07-29T20:13:25.187 回答
0

您可以尝试id^=，这将匹配以您指定的开头的 ID。对于您的情况，我相信它看起来像：

$("[id^=" + name + "]")
于 2013-07-29T20:12:50.060 回答
0

我的建议是使用类

<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 ;
于 2013-07-29T20:13:46.503 回答
0

我会稍微不同地做这件事，基本上只隐藏选项卡容器，而不是所有的 div。

<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());
});
于 2013-07-29T20:14:50.287 回答