Javascript 如何运行这个html组合框示例？
大家好，我一直在寻找一个简单的例子，介绍如何使html选择看起来像一个组合框。我从中找到了一个示例代码段。这实际上是对一个类似于我的问题的回答。萨米奇回答。它有一个新的名字。我从JSFIDLE复制了代码，并对其进行了一些调整，使其在我的机器上运行，但我无法使其运行 以下是代码大多数代码由Samich编写：Javascript 如何运行这个html组合框示例？,javascript,jquery,html,Javascript,Jquery,Html,大家好，我一直在寻找一个简单的例子，介绍如何使html选择看起来像一个组合框。我从中找到了一个示例代码段。这实际上是对一个类似于我的问题的回答。萨米奇回答。它有一个新的名字。我从JSFIDLE复制了代码，并对其进行了一些调整，使其在我的机器上运行，但我无法使其运行 以下是代码大多数代码由Samich编写： <html> <head> <style type="text/css"> #dropdown { posi
<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非常陌生，所以请大家耐心听我说。提前多谢。如果您使用，那么就不要使用$'btn'…为什么不使用？差不多！您需要确保将事件附加到元素的脚本在浏览器创建元素后运行，要做到这一点，只需使用ready函数
$(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);
});
});
jQuery javascript文件的src是否正确？也许应该是jquery.1.6.4.min.js？@TimBJames它现在可以工作了。我刚刚忘记了$document.ReadyFunction我将$'btn'。clickfunction更改为$'btn'。clickfunction但仍然不工作。@KristerAndersson+1，原因是我无法放置$document。ready$'btn'将选择id为btn的元素。$'btn'会选择我尝试过的任何元素，但我非常困惑。我不知道我需要什么文件，从哪里开始。非常感谢。你和克里斯特的答案非常相似，但他先回答。无论如何，非常感谢你的解释。
$(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);
});
});