Javascript 更改html中链接单击的占位符

使用下面的代码，我试图在单击链接时更改

选择
元素的
占位符。但到目前为止，还没有看到任何变化。此外，我还试图弄清楚当单击齿轮图标时如何显示
div
。当前，当单击div
div
时，它可以工作，但对于其中存在的图标不起作用



jQuery UI自动完成-默认功能
.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：8px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 8px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：8px 8px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}
$（函数（）{
$（“选择”）
.选择2({
占位符：“搜索命令…”，
宽度：“200”，
多重：假，
数据：[{
id:“”，
文本：“”
}, {
id:'rrrrrrr'，
文本：“测试1”
}, {
id:'测试1,2,3'，
文本：“测试1,2,3GFFFF”
}],
标记分隔符：['|']
})
$（'.select2 container'）。单击（函数（）{
$（this.css（'width'，'500px'）；
});    
$（'.select2 container'）.focusout（函数（）{
$（this.css（'width'，'200px'）；
});
$（'#changeCommand'）。单击（函数（）{
$（'select'）.css（'placeholder'，'Search Command…'）；
});    
$（'#changePref'）。单击（函数（）{
$（'select'）.css（'placeholder'，'Search Preferences…'）；
});
$（'#changeCD'）。单击（函数（）{
$（'select'）.css（'placeholder'，'Search Customer Default…'）；
});    
});
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i
只需在window.onclick事件中删除订阅即可。
单击子元素时，将触发按钮上的onclick事件。当前逻辑将显示并直接隐藏下拉列表
只需在window.onclick事件中删除订阅即可。
单击子元素时，将触发按钮上的onclick事件。您当前的逻辑将显示并直接隐藏下拉列表。您可以尝试以下方法：


$（函数（）{
$（“选择”）
.选择2({
占位符：“搜索命令…”，
allowClear:是的，
宽度：“200”，
多重：假，
数据：[{
id:“”，
文本：“”
}, {
id:'rrrrrrr'，
文本：“测试1”
}, {
id:'测试1,2,3'，
文本：“测试1,2,3GFFFF”
}],
标记分隔符：['|']
})
.on（'select2:open'，function（）{
$（'.select2 container'）.css（'width'，'600px'）；
})
.on（“select2:close”，函数（）{
$（'.select2 container'）.css（'width'，'200px'）；
});
$（'#changeCommand'）。单击（函数（）{
$（'.select2-selection__占位符'）.text（'Search Command…'）；
});    
$（'#changePref'）。单击（函数（）{
$（'.select2-selection__占位符'）。文本（'搜索首选项…'）；
});
$（'#changeCD'）。单击（函数（）{
$（'.select2-selection__占位符'）.text（'Search Customer Default…'）；
});    
});
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
var dropdowns=document.getElementById（“myDropdown”）；
if（event.target.classList.contains（'dropbtn'））{
下拉列表。类列表。切换（“显示”）；
}
如果（！event.target.classList.contains（“dropbtn”）和&dropdowns.classList.contains（“show”）），则为else{
下拉列表。类列表。切换（“显示”）；
}
}
.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：8px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 8px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：8px 8px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}

⚙
命令
偏好
客户违约
您可以尝试以下方法：


$（函数（）{
$（“选择”）
.选择2({
占位符：“搜索命令…”，
allowClear:是的，
宽度：“200”，
多重：假，
数据：[{
id:“”，
文本：“”
}, {
id:'rrrrrrr'，
文本：“测试1”
}, {
id:'测试1,2,3'，
文本：“测试1,2,3GFFFF”
}],
标记分隔符：['|']
})
.on（'select2:open'，function（）{
$（'.select2 container'）.css（'width'，'600px'）；
})
.on（“select2:close”，函数（）{
$（'.select2 container'）.css（'width'，'200px'）；
});
$（'#changeCommand'）。单击（函数（）{
$（'.select2-selection__占位符'）.text（'Search Command…'）；
});    
$（'#changePref'）。单击（函数（）{
$（'.select2-selection__占位符'）。文本（'搜索首选项…'）；