Question

我有一个下拉框根据选择我应该填充特定于该年份的内容。在任何时候我只能填充一年的内容，我需要根据选择隐藏其余的内容。我应该如何使用Jquery

进行编码

<div style="margin:4px 0 0 0;">
          <label> Select Year </label>
            <select name="select_Release">
                <option value="2011">2011</option>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
                <option value="2008">2008</option>
                <option value="2007">2007</option>
                <option value="2006">2006</option>
                <option value="2005">2005</option>
            </select>
      </div>

<div>Some 2011 content  to display</div>
<div>Some 2010 content  to display</div>
<div>Some 2009 content  to display</div>
<div>Some 2008 content  to display</div>
<div>Some 2007 content  to display</div>
<div>Some 2006 content  to display</div>
<div>Some 2005 content  to display</div>

Answer 1

这里的工作示例：http://jsfiddle.net/FDpmb/1/

<强>的jQuery ：

//traverse the DOM once to get all of your div tags per year
var years = $('.options > div')
//define a function that will show/hide the year content
var check = function($select)
{
    var year = $select.val();
    years.hide();
    $('div[data-year="' + year + '"]').show();
}
//get the instance of your select box
var element = $('#select_Release');
//bind an event handler
element.change(function () { check($(this)); });
//and we want to show the correct content initially, so call our change function
check(element);

稍加修改的标记（请注意选择框中的id以及额外的div代码和data-year属性）：

<div style="margin:4px 0 0 0;">
    <label> Select Year </label>
    <select id="select_Release" name="select_Release">
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
        <option value="2006">2006</option>
        <option value="2005">2005</option>
    </select>
</div>
<div class="options">
    <div data-year="2011">Some 2011 content  to display</div>
    <div data-year="2010">Some 2010 content  to display</div>
    <div data-year="2009">Some 2009 content  to display</div>
    <div data-year="2008">Some 2008 content  to display</div>
    <div data-year="2007">Some 2007 content  to display</div>
    <div data-year="2006">Some 2006 content  to display</div>
    <div data-year="2005">Some 2005 content  to display</div>
</div>

Answer 2

让自定义下拉列表的所有操作正常工作可能会很痛苦。我建议您查看https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Answer 3

你可以这样做：

<div class="years">
    <div>Some 2011 content  to display</div>
    <div>Some 2010 content  to display</div>
    <div>Some 2009 content  to display</div>
    <div>Some 2008 content  to display</div>
    <div>Some 2007 content  to display</div>
    <div>Some 2006 content  to display</div>
    <div>Some 2005 content  to display</div>
</div>

并在您的CSS文件中：

.years div {display：none; }

然后在你的jquery：

$('select[name="select_Release"]').change(function(){
    $('.years div').hide();
    $('.years div:contains("' + $(this).val() + '")').show();
});

如何在Jquery中编写下拉菜单逻辑

3 个答案: