HTML:
<select id="asd"> <option>hello</option> <option>I'M THE CHOSEN ONE</option> <option>asd</option> <option>wer</option> <option>qwe</option> </select>
JS:
var sel = document.getElementById("asd"); var optnz = sel.getElementsByTagName("option")[1]; sel.value = optnz.value; optnz.style.display = "none";
如您所见,它在chrome中有效,但在safari中不起作用。它应该做的是,当您单击下拉菜单时,隐藏“ I’M THE CHOSEN ONE”选项。
相同的HTML,这是JS:
var sel = document.getElementById("asd"); var opt = document.createElement("option"); opt.innerHTML = "YAYA"; opt.value = "YAYA"; sel.appendChild(opt); sel.value = "YAYA"; opt.style.display = "none";
无论如何,我需要做的是显示一个选定的选项(当前),并在打开下拉菜单时向用户隐藏,以便他无法选择它。
有什么建议/解决方法吗?我没有看到任何错误。Safari有什么问题?我应该改变方式吗?jQuery似乎无济于事。
编辑:
我需要隐藏下拉菜单中的选项,但同时我需要将此选项“值”显示为所选值!例如,“关闭”下拉列表将显示值“ I’M THE CHOSEN ONE”,但如果单击并打开菜单,则唯一可见的选项将是“ hello,asd,wer,qwe”。
您无法<option>在Safari(或IE)中切换元素上的显示。这是Safari长期限制传统的一部分,因为Safari限制了表单元素的CSS样式功能,认为交互式元素的可视语言应与OS一致(毫无意义地试图找到IE失败的原因)。
<option>
您唯一的选择是将其删除(并在以后重新添加),或将其设置为optnz.disabled = true。关于这些坏消息我很遗憾!
optnz.disabled = true