使用 jQuery 创建自定义选择框下拉列表 [英] Create a custom select box dropdown using jQuery

问题描述

我正在尝试设置 input[text] 和 ul 列表的样式以用作选择选项.但是，在我选择一个选项后，我的以下代码中断了.如下面的代码，如果我从列表中选择一个选项，则 input[text] 的值会发生变化，但列表不会隐藏自身.如果我在 javascript 中取消注释该行，则在我选择一个选项后该列表将隐藏，如果我再次单击输入，该列表将不会再次显示.谁能帮我解决这个问题?我对 jquery 和 javascript 不太了解，所以我花了几个小时试图调试，但它根本没有解决.

$(document).ready(function() {选择(#a"，#b")$("#a").click(function() {$("#b").show();});});函数选择a(a，b){$(b + " li").click(function() {$(b).隐藏();/*$(b + " ul").hide();*/var v = $(this).text();$(a + "输入").val(v);});}

.cselect {位置:相对；}.cselect 输入[类型]:禁用 {背景:#fff;}.cselect 菜单 {显示:无；位置:绝对；/* 顶部: 0px;*/左:0px；宽度:100%；背景:#fff;}.cselect 菜单 ul {边框:1px 实心 #d6d6d6;宽度:100%；}.cselect-menu li {填充:10px 5%；宽度:90%；}.cselect-menu li:hover {背景: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>业务</li><li>头发</li>

解决方案

jsBin 演示

使用 event.stopPropagation(); 来防止对 #b 的点击传播到父 #a

function selecta(a, b) {$(b + " li").click(function( event ) {event.stopPropagation();//这里！$(b).隐藏();/*$(b + " ul").hide();*/var v = $(this).text();$(a + "输入").val(v);});}

坦率地说......如果我想在你的多个自定义下拉菜单上使用你的代码，我会用那个jQuery发疯......

这里我简化了 HTML、CSS 和 jQuery:

$(function() {//DOM 就绪$(".cselect").each(function(){var $input = $(this).find("input");var $dropDown = $(this).find("ul");$(this).on("点击", function(){$dropDown.stop().slideToggle();});$dropDown.on("点击", "li", function(){$input.val( $(this).text() );});});});

*{margin:0;padding:0;}/* 丑陋的重置 */.cselect {位置:相对；}.c选择输入{背景:#fff;}.cselect ul{显示:无；位置:绝对；z-索引:999；左:0；顶部:1.2rem；保证金:0;宽度:100%；背景:#fff;边框:1px 实心 #d6d6d6;}.cselect li {填充:10px 5%；列表样式:无；}.cselect li:hover {背景: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>业务</li><li>头发</li>

<div class="cselect"><input type="text" disabled placeholder="Select n2"><ul><li>某事</li><li>其他</li>

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.

$(document).ready(function() {

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


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

.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>

解决方案

jsBin demo

Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #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);
    });
}

Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...

Here I've simplified HTML, CSS and 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>

这篇关于使用 jQuery 创建自定义选择框下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！