使用jQuery

Question

我正在尝试将输入[text]和ul列表设置为select-option。但是，在我选择了一个选项后，我的下面代码中断了。如下面的代码，如果我从列表中选择一个选项，输入[text]的值会改变，但列表不会隐藏自己。如果我取消注释javascript中的行，则在我选择一个选项后列表将隐藏，如果再次单击输入，列表将不会再次显示。任何人都可以帮我解决这个问题吗？我对jquery和javascript了解不多，所以我花了几个小时尝试调试，但它根本没有修复。

＆＃13;

＆＃13;

$(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);
	});
}

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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);
    });
}

坦率地说......我想在你的多个自定义下拉列表上使用你的代码我会厌倦那个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>