gpt4 book ai didi

javascript - 如何运行这个 html 组合框示例?

转载 作者:行者123 更新时间:2023-11-28 10:06:57 26 4
gpt4 key购买 nike

大家好,我一直在寻找一个关于如何使 html 选择看起来像组合框的简单示例。我从this link找到了一个示例代码片段。这实际上是对与我类似的问题的回答。 Samich 回答了这个问题。它有一个 jsfiddle link 。我从 jsfiddle 复制了代码并对其进行了一些调整以使其在我的计算机上运行,​​但我无法使其运行。

这是代码(大部分代码是Samich编写的):

<html>
<head>
<style type="text/css">
#dropdown { position:absolute; width:200px; display:none; }
#dropdown li:hover { background:#ccc; cursor:pointer; }
</style>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript" >
$('#btn').click(function() {
var pos = $('#txt').offset();
pos.top += $('#txt').width();
$('#dropdown').fadeIn(100);
return false;
});

$('#dropdown li').click(function() {
$('#txt').val($(this).text());
$(this).parent().fadeOut(100);
});
</script>
</head>

<body>
<input type="text" id="txt" /><a href="#" id="btn">V</a>
<ul id="dropdown">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
<li>Value 5</li>
<li>Value 6</li>
<li>Value 7</li>
<li>Value 8</li>
<li>Value 9</li>
<li>Value 10</li>
<li>Value 11</li>
<li>Value 12</li>
</ul>
</body>
</html>

我对 javascript 和 jquery 非常陌生,所以请耐心等待。预先非常感谢。

最佳答案

<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function() {
var pos = $('#txt').offset();
pos.top += $('#txt').width();

$('#dropdown').fadeIn(100);

return false;
});

$('#dropdown li').click(function() {
$('#txt').val($(this).text());
$(this).parent().fadeOut(100);
});
});
</script>

关于javascript - 如何运行这个 html 组合框示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8183565/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com