想实现的功能: 根据 select 的值,另一个 input 提供相应的 availableTags 来提示输入。比如 select 选择北京,那 input 就提供北京相关的 availableTags
没接触过前端,目前探索到这里,应付下作业:
使用 Jquery 的 autocomplete 。点击按钮,想实现 availableTags2 里的提示,但是没反应(是不是生成 html 的时候 id 就固定了?)。
请问该如何修改?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成( Autocomplete ) - 默认功能</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
var availableTags1 = ["ActionScript","AppleScript","Asp"];
var availableTags2 = ["Basic","Basketball", "Banana" ];
$( "#availableTags1" ).autocomplete({
source: availableTags1
});
$( "#availableTags2" ).autocomplete({
source: availableTags2
});
});
</script>
</head>
<body>
<input id="availableTags1"><button type="button" onclick="myFunction0()"> 使用 tags2 </button>
<script>
function myFunction0()
{
document.getElementById("availableTags1").id= "availableTags2"
};
</script>
</body>
</html>
1
waiaan 2021-05-13 17:14:30 +08:00
script 放到 body 标签最底下。
|
3
DOLLOR 2021-05-13 17:50:27 +08:00
$( "#availableTags2" ).XXXX 执行的时候页面并不存在 id="availableTags2"元素,后面做什么都没用了。
你应该另外创建一个 id="availableTags2"的元素,让$( "#availableTags2" ).XXXX 绑上去。 |
5
DOLLOR 2021-05-13 18:01:35 +08:00
我的意思是你做两个输入框,不要弄点击按钮切换。修改元素的 ID 是极少出现的场景。
|
7
codder 2021-05-14 11:45:33 +08:00
wws.[删掉]lanzoui.com[删掉]/iSClqp43q1e
你下载下来看看是不是你想要的效果,将 [删掉] 都删掉后访问地址 |