Создайте выпадающий список выпадающего меню, используя jQuery

Question

Я пытаюсь стилизовать ввод [текст] и список ul для функции select-option. Тем не менее, мой ниже код ломается после того, как я выбрал вариант. В качестве кода ниже, если я выбираю параметр из списка, значение ввода [текст] изменяется, но список не скрывает себя. Если я раскомментирую строку в javascript, список скроется после выбора опции, список не будет отображаться снова, если я снова нажму на вход. Может ли кто-нибудь помочь мне решить эту проблему? Я не знаю много о jquery и javascript, поэтому я провожу пару часов, пытаясь отлаживать, но это совсем не исправить.

$(document).ready(function() { 
 

 
\t selecta("#a", "#b") 
 
\t $("#a").click(function() { 
 
\t \t $("#b").show(); 
 
\t }); 
 
}); 
 

 

 
function selecta(a, b) { 
 
\t $(b + " li").click(function() { 
 
\t \t $(b).hide(); 
 
\t \t /*$(b + " ul").hide();*/ 
 
\t \t var v = $(this).text(); 
 
\t \t $(a + " input").val(v); 
 
\t }); 
 
}

.cselect { 
 
    position: relative; 
 
} 
 
.cselect input[type]:disabled { 
 
    background: #fff; 
 
} 
 

 
.cselect-menu { 
 
    display: none; 
 
    position: absolute; 
 
/* top: 0px;*/ 
 
    left: 0px; 
 
    width: 100%; 
 
    background: #fff; 
 
} 
 

 
.cselect-menu ul { 
 
    border: 1px solid #d6d6d6; 
 
    width: 100%; 
 

 
} 
 
.cselect-menu li { 
 
    padding: 10px 5%; 
 
    width: 90%; 
 
} 
 

 
.cselect-menu li:hover { 
 
    background: rgba(41, 128, 185, 0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="a" class="cselect"> 
 
    <input type="text" disabled placeholder="Select"/> 
 
    <div id="b" class="cselect-menu"> 
 
    <ul > 
 
     <li>Business</li> 
 
     <li>Hair</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

jsBin demo

Использование event.stopPropagation(); для предотвращения щелчков на #b распространяются родителю #a

function selecta(a, b) { 
    $(b + " li").click(function(event) { 
     event.stopPropagation();    // HERE! 
     $(b).hide(); 
     /*$(b + " ul").hide();*/ 
     var v = $(this).text(); 
     $(a + " input").val(v); 
    }); 
} 

... Откровенно I'f Я хотел использовать свой код на нескольких пользовательских-выпадающие твой я бы с ума, что JQuery ...

Здесь я упростил HTML, CSS и JQuery:

$(function() { // DOM ready 
 

 

 
    $(".cselect").each(function(){ 
 

 
    var $input = $(this).find("input"); 
 
    var $dropDown = $(this).find("ul"); 
 

 
    $(this).on("click", function(){ 
 
     $dropDown.stop().slideToggle(); 
 
    }); 
 

 
    $dropDown.on("click", "li", function(){ 
 
     $input.val($(this).text()); 
 
    }); 
 

 
    }); 
 

 
});

*{margin:0; padding:0;} /* ugly reset */ 
 

 
.cselect { 
 
    position: relative; 
 
} 
 
.cselect input{ 
 
    background: #fff; 
 
} 
 
.cselect ul{ 
 
    display: none; 
 
    position: absolute; 
 
    z-index:999; 
 
    left: 0; 
 
    top: 1.2rem; 
 
    margin:0; 
 
    width: 100%; 
 
    background: #fff; 
 
    border: 1px solid #d6d6d6; 
 
} 
 
.cselect li { 
 
    padding: 10px 5%; 
 
    list-style:none; 
 
} 
 
.cselect li:hover { 
 
    background: rgba(41, 128, 185, 0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cselect"> 
 
    <input type="text" disabled placeholder="Select n1"> 
 
    <ul> 
 
    <li>Business</li> 
 
    <li>Hair</li> 
 
    </ul> 
 
</div> 
 

 
<div class="cselect"> 
 
    <input type="text" disabled placeholder="Select n2"> 
 
    <ul> 
 
    <li>Something</li> 
 
    <li>Else</li> 
 
    </ul> 
 
</div>