求救 safari select option 不支持show hide

反转皇潮 2018-01-31 07:19:13

如题
代码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.hide { display: none; }
.show { display: block; }
</style>
<script src="/CL_kaifa/js/jquery-2.1.4.js"></script>
<script type="text/javascript">
function ch() {
$("#aaa").hide();
//document.getElementById("sel").options[0].style["display"] = "none";
//$("#sel option").each(function () {
// $(this).hide();
// //$(this).removeClass('show');
// //$(this).addClass('hide');
// $(this).css({ 'display': 'none' })

//})
}
</script>
</head>
<body>
<a href="#" id="aaa">111111111111111111111111111111111111111</a>
<select id="sel" onchange="ch()">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="湖南">湖南</option>
<option value="长沙">长沙</option>
</select>
<a href="#" onclick="ch()">content</a>
</body>
</html>

我在上面用了几种方式来控制显示隐藏在其他游览器都正常显示只有在safari 没有效果
为了测试safari 是否支持 show hide a链接为例子这个时候是可以控制的就可以隐藏
请问大家 safari 控制option 显示隐藏要怎么写
新手求教了被这个问题困扰很久了一直没有解决

...全文

705 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

反转皇潮 2018-02-02

打赏
举报

反转皇潮 2018-02-01

打赏
举报

我按照 “天际的海浪” 提供的写法修改了我的例子请问大家我写的有哪些地方可以改进的因为像这样显示隐藏项目里面有很大地方都有有没有简单点的写法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .hide { display: none; } .show { display: block; } </style> <script src="/CL_kaifa/js/jquery-2.1.4.js"></script> <script type="text/javascript"> var shareholder_type_cl; var document_type_cl; var different_countries_cl; $(function () { //将select通过clone方法保存 shareholder_type_cl = $("#shareholder_type").clone(); document_type_cl = $("#document_type").clone(); different_countries_cl = $("#different_countries").clone(); }) function sel_ch() { //删除所有的option $("#document_type option").remove(); $("#different_countries option").remove(); var shareholder_type = $("#shareholder_type").val(); if (shareholder_type == "境内个人") { var document_type_options = document_type_cl.find("option[value='身份证']").clone(); $("#document_type").append(document_type_options); var different_countries_options = different_countries_cl.find("option[value='中国']").clone(); $("#different_countries").append(different_countries_options); } else if (shareholder_type == "境内企业") { var document_type_options = document_type_cl.find("option[value='营业执照']").clone(); $("#document_type").append(document_type_options); var different_countries_options = different_countries_cl.find("option[value='中国']").clone(); $("#different_countries").append(different_countries_options); } else if (shareholder_type == "境外个人") { var document_type_options = document_type_cl.find("option[value='护照']").clone(); var document_type_options2 = document_type_cl.find("option[value='回乡证（往来内地通行证）']").clone(); $("#document_type").append(document_type_options); $("#document_type").append(document_type_options2); different_countries_cl.find("option").each(function () { if ($(this).val() != "中国") { var different_countries_options = different_countries_cl.find("option[value='" + $(this).val() + "']").clone(); $("#different_countries").append(different_countries_options); } }) } else if (shareholder_type == "境外企业") { var document_type_options = document_type_cl.find("option[value='开业证明']").clone(); $("#document_type").append(document_type_options); different_countries_cl.find("option").each(function () { if ($(this).val() != "中国") { var different_countries_options = different_countries_cl.find("option[value='" + $(this).val() + "']").clone(); $("#different_countries").append(different_countries_options); } }) } //查找出需要显示的option并复制 //var options = select.find("option[value='上海']").clone(); //将需要显示的option添加到select中 //$("#sel").append(options); //因为option.remove()不会刷新控件,需要将新的option切换上去 //这里排除了options.size() == 0的情况 //$("#sel").find('option').eq(0).attr("selected", true); //$("#aaa").hide(); //document.getElementById("sel").options[0].style["display"] = "none"; //$("#sel option").each(function () { // $(this).hide(); // //$(this).removeClass('show'); // //$(this).addClass('hide'); // $(this).css({ 'display': 'none' }) //}) } </script> </head> <body> <select id="shareholder_type" onchange="sel_ch()"> <option value="境内个人">境内个人</option> <option value="境内企业">境内企业</option> <option value="境外个人">境外个人</option> <option value="境外企业">境外企业</option> </select> <select id="document_type"> <option value="身份证">身份证</option> <option value="营业执照">营业执照</option> <option value="护照">护照</option> <option value="回乡证（往来内地通行证）">回乡证（往来内地通行证）</option> <option value="开业证明">开业证明</option> </select> <select id="different_countries"> <option value="中国" data-gb="gb">中国</option> <option value="美国" data-gb="gb">美国</option> <option value="英国" data-gb="gb">英国</option> </select> </body> </html>

反转皇潮 2018-02-01