jQuery的输入字段事件的内容DIV

在下面的脚本：我创建像一个选择选项droplist，jQuery的输入字段事件的内容DIV

但是，如果我用文字ID focusout事件我选定的文本VAL事件发生后不能正常工作！

任何替代解决方案？在块注释

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

#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;"> 
 
\t <input type="text" id="text" autocomplete="off" placeholder="Select Option" /> 
 
\t <div class="droplist"> 
 
\t \t <p>option one</p> 
 
\t \t <p>option two</p> 
 
\t \t <p>option three</p> 
 
\t \t <p>option four</p> 
 
\t \t <p>option five</p> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

来源

2016-12-31 Farooq

我的第一个问题是，为什么？首先，具有P元素的div应该是一个列表（ul和li），或者更好的是一个select。正确制作表单，并使用jQuery UI创建可修改的下拉菜单。 – junkfoodjunkie

使用.val()

focusOut事件只设定值。然后隐藏列表。

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

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

来源

2016-12-31 23:03:48 johnniebenson

你应该使用正确的标记为下拉

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

来源

2017-01-01 23:02:23 Mikkel

您无法对正确的下拉选择选项作出更多样式。 – Farooq

你可以使用的setTimeout（）函数，因为JavaScript作为besoin德临时工倒L'执行德$（” .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> 
 
     \t \t <body> 
 
\t \t \t <div style="margin:20px;"> 
 
\t \t \t \t <input type="text" id="text" autocomplete="off" placeholder="Select Option" /> 
 
\t \t \t \t <div class="droplist"> 
 
\t \t \t \t \t <p>option one</p> 
 
\t \t \t \t \t <p>option two</p> 
 
\t \t \t \t \t <p>option three</p> 
 
\t \t \t \t \t <p>option four</p> 
 
\t \t \t \t \t <p>option five</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </body> 
 
     </html>

来源

2017-01-04 14:06:38 rapaelec

jQuery的输入字段事件的内容DIV

回答

相关问题