Question

在下面的脚本中：我正在创建一个选择选项下拉列表，

但是，如果我在选择的文本val事件后无效，则在文本ID上使用focusout事件！

任何其他解决方案？

块注释中的

焦点事件

＆＃13;

$(document).ready(function(){
        
        //droplist toggle
        $('#text').click(function(){
        	$('.droplist').toggle();
        });
        
         // text move to input field
         $('.droplist p').click(function(){
        		var selected = $(this).text();
        		$('#text').val(selected, $('.droplist').hide());			
         });
          
        // input field foucsout
        
        /*$('#text').focusout(function(){
        	$('.droplist').hide();
        });*/
         
 });

＆＃13;

 #text{
        width:200px;
        height:35px;
        padding-left:10px;
        box-sizing: border-box;
        margin-bottom:3px;
  }
 .droplist{
        width:200px;
        background-color:#D8D8D8;
        border-radius:4px;
        padding:5px;
        position:absolute;
        box-sizing: border-box;
        font-family:arial;
        font-size:15px;
        display:none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    

</head>
<body>
<div style="margin:20px;">
	<input type="text" id="text" autocomplete="off" placeholder="Select Option" />
	<div class="droplist">
		<p>option one</p>
		<p>option two</p>
		<p>option three</p>
		<p>option four</p>
		<p>option five</p>
	</div>
</div>
</body>
</html>

＆＃13;

Answer 1

使用.val()仅设置值。然后隐藏列表。

$("#text").val(selected);
$(".droplist").hide();

参考：http://api.jquery.com/val/

Answer 2

您应该为下拉列表使用正确的标记

<select class="droplist" name="droplist" id="droplist">
    <option>option one</option>
    <option>option two</option>
    <option>option three</option>
    <option>option four</option>
    <option>option five</option>
</select>

Answer 3

你可以使用setTimeout（）函数，因为javaScript as besoin de temps pour l'execution de $（'。droplist p'）。click（）;

$(document).ready(function(){       
  //droplist toggle
  $('#text').focus(function(event){
    event.stopPropagation();
    $('.droplist').toggle();
  });

  // text move to input field
  $('.droplist p').click(function(){
    var selected = $(this).text();
    $('#text').val(selected,$('.droplist').hide());
  });
  // input field foucsout
  $('#text').focusout(function(){
    window.setTimeout(function(){
      $('.droplist').hide();
    }, 100);
  });
 });

 #text{
        width:200px;
        height:35px;
        padding-left:10px;
        box-sizing: border-box;
        margin-bottom:3px;
        }
 .droplist{
        width:200px;
        background-color:#D8D8D8;
        border-radius:4px;
        padding:5px;
        position:absolute;
        box-sizing: border-box;
        font-family:arial;
        font-size:15px;
        display:none;
 }

 <!DOCTYPE html>
        <html>
        <head>
     <script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
    
        </head>
        		<body>
			<div style="margin:20px;">
				<input type="text" id="text" autocomplete="off" placeholder="Select Option" />
				<div class="droplist">
					<p>option one</p>
					<p>option two</p>
					<p>option three</p>
					<p>option four</p>
					<p>option five</p>
				</div>
			</div>
		</body>
        </html>

jquery输入字段focusout div

3 个答案: