3、前端大杂烩_前端本身就是大杂烩-CSDN博客

一Javascriptjquery获取select下拉框选中的的值
二去掉改变select右边的三角图标
三js备注
- js的位置
四textarea根据内容自动延伸不显示滚动条
五js 获取选中的单选按钮radio的值
六html中插入flash做背景图片

一、Javascript/jquery获取select下拉框选中的的值

1. 参考资料

http://my.oschina.net/ydsakyclguozi/blog/286269

2. Javascript

（1）html代码

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
</select>

（2）js代码

1:拿到select对象： var myselect=document.getElementById("test");
2:拿到选中项的索引： var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value：  myselect.options[index].value;
4:拿到选中项options的text：  myselect.options[index].text;

2. jquery代码

（记得加载了jquery库）

1:var options=$("#test option:selected");  //获取选中的项
2:alert(options.val());   //拿到选中项的值
3:alert(options.text());   //拿到选中项的文本

二、去掉/改变select右边的三角图标

1. 方法1

给select 标签加样式 appearance:none;-moz-appearance:none; -webkit-appearance:none;

<select style="appearance:none;-moz-appearance:none; -webkit-appearance:none; ">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
</select>

2. 方法2

 <span style="border:0px solid buttonface; position:absolute; overflow:hidden"> 
      <select style=" margin:-2px -18px -2px -2px;"> 
          <option value ="volvo">Volvo</option>
          <option value ="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option> 
      </select>
 </span>

3. 方法3

改变select的图标

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style type="text/css"> 
        .select1 { width: 110px; height: 18px; overflow: hidden; /*隐藏了小三角，因为宽度为110px,而select宽度为130px*/ display:block; } 
        .select2{ border: 1px solid #000; width:130px; display:block; height: 18px; overflow:hidden; background:url(images/icons/10.gif) right top no-repeat 18px 18px; /*这里设置的是新的小图标*/ } 
        select { FONT-SIZE: 13px; position: relative; left: -2px; top: -2px; width: 130px; color: #000; }
    </style>
</head>

<body>
     <div class="select2"> 
        <div class="select1"> 
            <select> 
                <option value ="volvo">Volvo</option>
                <option value ="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option> 
            </select> 
        </div> 
    </div>
</body>

</html>

三、js备注

1. js的位置

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的
这里写图片描述

四、textarea根据内容自动延伸，不显示滚动条

1. 参考资料

http://www.jq22.com/jquery-info3451

2. 效果图

这里写图片描述

3. demo

<body style="background: #EEE;">
    <div style="width: 650px; margin: 0 auto;">
        <h3>最大高度，max-height 300px</h3>
        <textarea style='max-height: 300px; width: 500px;resize: none;'>此款插件兼容至少IE7，具体未做详细测试，请大家自行测试。这是测试文字，可根据内容自动延伸高度，直到你设置的最大高度，如果设置了最大高度，则当达到最大高度后，将会出现滚动条。这是测试文字，可根据内容自动延伸高度，直到你设置的最大高度，如果设置了最大高度，则当达到最大高度后，将会出现滚动条。这是测试文字，可根据内容自动延伸高度，直到你设置的最大高度，如果设置了最大高度，则当达到最大高度后，将会出现滚动条。</textarea>
        <h3>没有高度限制，no max-height</h3>
        <textarea style='resize: none;width: 500px;'>这是测试文字，可根据内容自动延伸高度，永远不会出现滚动条，此款插件兼容至少IE7，具体未做详细测试，请大家自行测试</textarea>
    </div>

</body>

<script src='./autosize.js'></script>
<script>
  autosize(document.querySelectorAll('textarea'));
</script>

五、js 获取选中的单选按钮radio的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js 获取选中的单选按钮radio的值</title>
</head>
<body>
选择你最喜欢的语言： <br /><br />
<input name="radio1" type="radio" value="java">java
<input name="radio1" type="radio" value="c++">c++
<input name="radio1" type="radio" value="c">c
<input type="button" onClick="checks()" value="提交">
<script>
    function checks()
    {
        var radios=document.getElementsByName("radio1");
        for(var i=0;i<radios.length;i++)
        {
            if(radios[i].checked==true)
            {
                alert("你最喜欢的语言是："+radios[i].value);
            }
        }
    }
</script>
</body>
</html>

六、html中插入flash做背景图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        embed{width:100%;height:100%;position:absolute;z-index:-10px;left:0;top:0;}
        #div1{z-index:10px;position:relative;}
    </style>
</head>

<body>
     <embed src="flash.swf"/>    
</body>
</html>