Блог

Главная - Вопросы по программированию - Выберите элемент из выпадающего меню

Выберите элемент из выпадающего меню

#javascript #jquery #html #css #drop-down-menu

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

Вопрос:

Я создал выпадающее меню css, и когда я выбираю и выбираю из него, я хочу, чтобы он указывал выбранный параметр в раскрывающемся списке, но он показывает то же самое, что и, не меняется… Я использую jQuery, я думаю, что путаница связана с ul и li и с тем, какими должны быть мои селекторы.

 <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
    <title></title>

    <style>

.dropdown-menu {
    padding: 0;
    margin: 0;
    width: 130px;
    font-family: Arial;
    display: inline-table;
    position: relative;
    border: solid 1px #CCCCCC;
    border-bottom-style: none;
    background-color: #F4F4F4;
}
.dropdown-menu .menu-item {
    display: none;
}
.dropdown-menu .menu-item-link {
    display: table-cell;
    border-bottom: solid 1px #CCCCCC;
    text-decoration: none;
    color: rgba(89,87,87,0.9);
    height: 30px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}
.dropdown-menu:hover .menu-item {
    border-bottom-style: solid;
}
.dropdown-menu .menu-item-link:hover {
    background-color: #DDDDDD;
}

.dropdown-menu:hover .menu-item {
    display: table-row;
}
.dropdown-menu .menu-item.active {
    display: table-header-group;
}
.dropdown-menu .menu-item.active .menu-item-link:after {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 12px;
    right: 8px;
    border-top: 4px solid rgba(0, 0, 0, 1);     
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

}



    </style>
</head>
<body>

<script>

$(document).ready(function(){

    $("#account").click(function () {

    alert($('.menu-item').val());

    });


</script>



<ul class = "dropdown-menu">
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="account">account</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="gametime">gametime</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="RPA">Cereal</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="workhard">workhard</a>
    </li>
    <li class = "active menu-item">
        <a href = "#" class = "menu-item-link" id="puppies">puppies</a>
    </li>            
</ul>
</select>

</body>
</html>

Ответ №1:

вы должны сделать так:

 $(".dropdown-menu .menu-item a").click(function () {

    alert($(this).text());
     $(".menu-item").removeClass("active"); // remove active class from li tags
     $(this).closest("li").addClass("active"); // add active class to current clicked one

    });

при щелчке по тегу привязки li get его текст val() работает только для входных элементов формы, а ul, li и a не являются элементами ввода, которые вы должны использовать text() , чтобы получить его значение и отобразить его как выбранный, добавьте активный класс к выбранному и удалите из других

ДЕМОНСТРАЦИЯ СКРИПКИ

Ответ №2:

Проверьте это http://jsfiddle.net/DsfU3/I внесли некоторые изменения в поля идентификатора малого и среднего бизнеса, просто посмотрите, может ли это вам помочь $(document).ready(function(){
$(".menu-item-link").on('click',function () {
$(".menu-item").removeClass("active");
$("#" $(this).text()).closest("li").addClass("active");
})
});

Метки: