Блог

Главная - Вопросы по программированию - Как написать логику выпадающего меню в Jquery

Как написать логику выпадающего меню в Jquery

#javascript #jquery #drop-down-menu

#javascript #jquery #выпадающее меню

Вопрос:

У меня есть выпадающее окно, основанное на выборе, в которое я должен заполнить содержимое, относящееся к этому году. В любой момент я могу заполнить только один год контента, и мне нужно скрыть остальной контент на основе выбора. Как я должен закодировать это с помощью 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>

Комментарии:

1. Извините, я не понял, что вам нужно. Вы хотите выбрать год в select_Release и показать соответствующий div?

2. @Гильерме Коста Да, это то, что мне нужно. Я хочу отобразить содержимое на основе выбора. Поэтому, когда я показываю контент, основанный на выборе года, остальная часть контента должна быть скрыта

Ответ №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>

Ответ №2:

Может быть довольно сложно заставить все действия для пользовательского выпадающего списка работать правильно. Я бы рекомендовал проверить https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Ответ №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 { отображение: отсутствует; }

затем в вашем jquery:

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