jQuery< select>用输入和div来模拟 [英] jQuery <select> simulation with input and div

问题描述

我有一个输入字段和一个有span的孩子

 < input type =textid =input name =input/> 
 
< div id =content> 
< span>选项1< / span> 
< span>选项2< / span> 
< span>选项3< / span> 
< span>选项4< / span> 
< / div> 
  

我试图做一个jQuery模拟 select
$ $ $（'＃content'）。hide（）; $ c $>下拉列表。
$（'＃input'）。focus（function（）{
$（'＃content'）。show（）;
}）; $（$＃
$（'＃content span'）。click（function（）{
$（'＃input'）。val（$（this）.html（））
$（'＃content'）。hide（）;
}）;


一切正常，但我无法弄清楚如何在输入模糊处隐藏div。
如果我把它放在jQuery里面

$ $ $（'＃input'）。blur（function（）{
$（'＃content'）。hide（）;
}）;

然后我无法点击span元素

解决方案

你可以通过使用 setTimeout 来完成，比如这个，这样就有足够的时间点击span来注册。

I have one input field and one division with span children

<input type="text" id="input" name="input" />

<div id="content">
    <span>option 1</span>
    <span>option 2</span>
    <span>option 3</span>
    <span>option 4</span>
</div>

I'm trying to make a jQuery simulation of select drop-down list.

$('#content').hide();
$('#input').focus(function(){
    $('#content').show();
});

$('#content span').click(function(){
    $('#input').val($(this).html())
    $('#content').hide();
});

Everything's works fine but I just can't figure it out how to hide div on inputs blur. If I put this inside jQuery

$('#input').blur(function(){
    $('#content').hide();
});

then I'm unable to click on span element

解决方案

You can do it by using setTimeout like this so that there is just enough time for the click on the span to register.

这篇关于jQuery< select>用输入和div来模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！