请教js重写select的option

想要实现的功能：当鼠标点击select时，改变select中的option内容。
请教问题：当第一次点击select时会有个闪动的过程（就是展开再收缩），需点第二次才能正常显示，请教一下如果写法才能让第一次就是展示正常呢？
代码如下：
<select name="a" onFocus="CreateOptions(this)">
  <option value="0"> </option>
  <option value="1">a1</option>
  <option value="2">a2</option>
</select><script>
function CreateOptions(obj){
var v = "选项一,选项二,选项三,选项四,选项五,选项六,选项七,选项八";
var arr = v.split(","); for(var i=obj.options.length;i>0;i--){
obj.options.remove(i);  
}

for(var i=0;i<arr.length;i++){
obj.options.add(new Option(arr[i],(i+1))); 
}
}
</script>

解决方案 »

  1.   

    页面 onload之后就执行CreateOptions这个方法!
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD> <BODY onload="CreateOptions()">
      <select id="s1" name="a" >
      <option value="0"> </option>
      <option value="1">a1</option>
      <option value="2">a2</option>
    </select><script>
    function CreateOptions(){
    var obj=document.getElementById("s1");
    var v = "选项一,选项二,选项三,选项四,选项五,选项六,选项七,选项八";
    var arr = v.split(",");for(var i=obj.options.length;i>0;i--){
    obj.options.remove(i);   
    }for(var i=0;i<arr.length;i++){
    obj.options.add(new Option(arr[i],(i+1)));  
    }
    }
    </script>
     </BODY>
    </HTML>
      

  3.   

    >> 第一次点击select时会有个闪动的过程（就是展开再收缩）应该是刚开始的时候select没有数据，需要加载一次吧。你可以在body的onload事件里把CreateOptions方法先执行一次。
      

  4.   

    这个还不能在onload里写，因为是动态数据，就是随时会改变数据。
      

  5.   

    目前要求是在select聚焦时或鼠标点击时才改变数据，有什么办法可以处理呢？
      

  6.   

    再怎么动态变，初次登录时总能知道该给他什么值吧~~除非这个下拉框的值，是在页面上点击某个东西之后，动态填充，靠用户来触发。如果不是，初次登录就可以给其填值，至于今后的变化，就是看select的onchange事件了。onload事件只触发一次！等同于初始化一样
      

  7.   

    onload时可以填充了。
    你的select是被触发的，是别的动作使其内容变化，你事件应该加在触发他的元素身上。
    如果不知道是被哪个触发的，那就是空，直到某个事件触发其内容变化，再去改变，而不是直接一进来，select就自己要改变自己~~
      

  8.   

    其实现在做的就差不多省市这种效果，就是市的条件是从省来的，但不要求在选省的时候就去改变市的内容，因为这个数据需要通过ajax去取数据，所以就要求在用到这个市数据的时候才去取，所以才会有在聚焦或鼠标点击的时候才去改变数据。
    我看了省市联动的，它是通过选市去改变市的数据的，这个问题，现在就是这个改变数据的时机问题。
      

  9.   

    用onchange()事件处理！~
    这样每次点击一下响应一下数据
    就可以保证数据的更新！~
      

  10.   

    应该下面的代码会清楚一点：省：<select name="a">
      <option value="0"> </option>
      <option value="1">广东省</option>
      <option value="2">河北省</option>
    </select>　　市：<select name="b" onfocus="CreateOptions(this)">
      <option value="0"> </option>
    </select><script>
    function CreateOptions(obj){
    var v = "广州市,惠州市";
    if(document.getElementById("a").options[document.getElementById("a").selectedIndex].value==2)
    v = "沧州市,衡水市";
    var arr = v.split(","); for(var i=obj.options.length;i>0;i--){
    obj.options.remove(i);  
    }

    for(var i=0;i<arr.length;i++){
    obj.options.add(new Option(arr[i],(i+1))); 
    }
    }
    </script>
    选省时不先改变市里的数据，要在市聚焦或点击鼠标时改变其数据，聚焦应该没问题，就点击时有第一次的冷却。
    如果是在选省的时候直接就改变了市的数据也不会有问题。
      

  11.   


    <!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>无标题文档</title>
    </head><body>
    <select name="a" id="a" onchange="CreateOptions(this)">
      <option value="1">广东省</option>
      <option value="2">河北省</option>
    </select>　　市：<select name="b" id="b">
      <option value="0"> </option>
    </select><script>
    function CreateOptions(o){
    var v = "广州市,惠州市";
    if(document.getElementById("a").options[document.getElementById("a").selectedIndex].value==2)
    v = "沧州市,衡水市";
    var arr = v.split(",");
    var obj=document.getElementById("b");
    obj.options.length=0;   
    for(var i=0;i<arr.length;i++){
    obj.options.add(new Option(arr[i],(i+1)));  
    }
    }CreateOptions();
    </script>
    </body>
    </html>
      

  12.   


      <script>
    function CreateOptions(obj){
    var v = "选项一,选项二,选项三,选项四,选项五,选项六,选项七,选项八";
    var arr = v.split(","); for(var i=obj.options.length;i>0;i--){
    obj.remove(i);   
    } for(var i=0;i<arr.length;i++){
    obj.options[i] = new Option(arr[i],(i+1));  
    }
    }
     </script>
      

  13.   

    看来是小弟的表述有些问题吧，市不靠谁来改变数据，靠自己改变数据，所以不需要在省里写onchange事件，如果由省来改变，是没有问题的。
      

  14.   

    我来给点意见你吧，
    <div onmuouseOver = "createOption">  <select> <option></option> </select></div>
      

  15.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function CreateOptions() {
    var obj = document.getElementById("s1").options.length;
    var v = "选项一,选项二,选项三,选项四,选项五,选项六,选项七,选项八";
    var arr = v.split(","); for(var i = obj; i > 0; i--){
    obj.options.remove(i);   
    } for(var i = 0;i < arr.length; i++){
    obj.options.add(new Option(arr[i],(i+1)));  
    }
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <select id="s1" name="a" >
      <option value="0"> </option>
      <option value="1">a1</option>
      <option value="2">a2</option>
    </select></BODY>
    </HTML>