Действия выпадающего списка с использованием jquery

Question

У меня есть следующий выпадающий список, который не является традиционным выпадающим списком SELECT и OPTION. Используя JQUERY, я хочу знать, есть ли способ выполнить действие, когда выбрана данная опция. EX - Когда вы щелкаете по раскрывающемуся списку и выбираете BIRDS, он скрывает некоторые DIV в других местах на странице. Спасибо

<section class="main">
    <div class="wrapper">
        <div id="dd" class="wrapper-dropdown-3" tabindex="1">
            <span>View By Category</span>
            <ul class="dropdown">
                <li><a>Dogs</a></li>
                <li><a>Cats</a></li>
                <li><a>Birds</a></li>
            </ul>
        </div>
    </div>
</section>

javascript jquery html html-select

0

Maria Nolorbe 19 Дек 2015 в 10:14

Answer 1

https://jsfiddle.net/o8h4gvgd/5/

Используйте что-то вроде этого. Я надеюсь, что это поможет вам.

$(document).ready(function(){
    $('.dropdown .bird').click(function(){
    $('#section_1').toggle();
    $('#section_1').hide();    
  });
});

0

Ahmad Asjad 19 Дек 2015 в 07:28

Answer 2

$('div#dd ul.dropdown li a').on('click', function() {var clsName = $(this).parent().attr('name'); $("."+clsName).hide()});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="main">
            <div class="wrapper">
                <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                    <span>View By Category</span>
                    <ul class="dropdown">

                        <li name='dogs'><a href="javascript:">Dogs</a></li>
                        <li name='cats'><a href="javascript:">Cats</a></li>
                        <li name='birds'><a href="javascript:">Birds</a></li>

                </ul>
                </div>
            </div>
        </section>

<div class='dogs'>Div with dogs info</div>
<div class='cats'>Div with cats info</div>
<div class='birds'>Div with birds info</div>

0

yjs 19 Дек 2015 в 07:31

Answer 3

Дать класс для таких записей, как;

<li><a class="item">Dogs</a></li>
<li><a class="item">Cats</a></li>
<li><a class="item">Birds</a></li>

Затем используйте событие click вроде;

$(".item").click(function(){
    item = $(this).text();
    alert(item);
});

0

blasteralfred Ψ 19 Дек 2015 в 07:37

Answer 4

 $(document).ready(function  () {

    //Your function on what needs to be done on click
    var liClicked = function(obj){
        alert("You Clicked : "+$(obj).html());
    }

    //trigger the onclick based on selected -- in this case '#dd ul.dropdown li a'
    $(document).on("click","#dd ul.dropdown li a", function(){
        //call the above written function
        liClicked(this);
    });

});

0

Ajay Dsouza 19 Дек 2015 в 09:17

Answer 5

$('#dd ul.dropdown a').click(function() {
var _this = $(this);
var index = $('#dd ul.dropdown a').index(_this);

alert(index);

if (index === 2) {
    alert(_this.text());
    // ..do anything you want 
}

0

iulo 19 Дек 2015 в 07:43

Действия выпадающего списка с использованием jquery

5 ответов

Похожие вопросы

Новые вопросы

javascript