如何让chrome，select里面的option支持单击事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让chrome，select里面的option支持单击事件相关的知识，希望对你有一定的参考价值。

将想要实现的效果放到一个function里，然后在select里触发此function。以下方法在Chrome亲测有效。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
    .default_bgbackground-color: #fffff1;
    .red_bgbackground-color: #ed5e35;
    .green_bgbackground-color: #7cb530;
    .yellow_bgbackground-color: #f7f559;
</style>
<script type="text/javascript">

function MM_jumpMenu(targ,selObj,restore) //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;


function changebgtest()
    var myselect=document.getElementById("changeBG");  //找到select对象
    var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
    var option_value = myselect.options[index].value;   //拿到选中项options的value
    var changeoper = document.getElementById("body_bg");  //要改变的对象ID
    if(option_value == "red")
        changeoper.className = "red_bg";
    else if(option_value == "green")
        changeoper.className = "green_bg";
    else
        changeoper.className = "yellow_bg";

//
</script>
<body id="body_bg" class="default_bg">
<form action="" method="get">
    <label>1、普通下拉列表菜单</label>
    <select name="">
        <option value="0">divcss5</option>
        <option value="1">DIVCSS5</option>
    </select>
        <br><br>
    <label>2、跳转的下拉列表菜单</label>
    <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
        <option value="http://www.divcss5.com/">divcss5</option>
        <option value="http://www.divcss5.com/">DIVCSS5</option>
    </select>
</form><br><br>
<form action="" method="get">
    <label>3、改变背景色</label>
    <select name="change" id="changeBG" onchange="changebgtest()">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
    </select>
</form>
</body>
</html>

 参考技术A option只能选中，点击事件的话，无法原生支持，可以用div模拟select下拉框本回答被提问者采纳 参考技术B 捞填报镁谓创办奄

select,option清楚默认样式

select,option{
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    border: none;
    outline: none;
    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*将背景改为红色*/
    background:#fff;
    /*加padding防止文字覆盖*/
    padding-right: .14rem;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display: none;}

 

以上是关于如何让chrome，select里面的option支持单击事件的主要内容，如果未能解决你的问题，请参考以下文章

请问在html中怎么让select的默认值为空，且select里面的option值都不为空。

如何获取select里面的option的值

select,option清楚默认样式

如何让select 的每一个option 中的文字水平居中？

jquery如何获取一个select里面的所有option的值呢？

jquery如何获取一个select里面的所有option的值呢？