js:select

html code:
地图X：<select onclick="showXY(this);"><option  value = "-62">-62</option> </select>js code:
function showXY(par){
par.innerHTML="<option value = '-62' selected>-62</option>";
for(var i = -61;i<=62;i++){
var text = i;
var child =document.createElement("option");
child.innerHTML  = "<option  value='"+text+"'>"+text+"<option/>";
par.appendChild(child);
}
}问题是这样的：我想在点击select后加入<option>按钮，但是加入之后选择其中的一个值，select显示的总是-62，我想为<option>添加click事件，但是不行，有什么解决方法？谢谢

解决方案 »

  1.   


    js 代码
    // 1.判断select选项中 是否存在Value="paraValue"的Item        
    function jsSelectIsExitItem(objSelect, objItemValue) {        
        var isExit = false;        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                isExit = true;        
                break;        
            }        
        }        
        return isExit;        
    }         
       
    // 2.向select选项中 加入一个Item        
    function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
        //判断是否存在        
        if (jsSelectIsExitItem(objSelect, objItemValue)) {        
            alert("该Item的Value值已经存在");      //没有可以删掉    
        } else {        
            var varItem = new Option(objItemText, objItemValue);      
            objSelect.options.add(varItem);     
            alert("成功加入");    //没有可以删掉 
        }        
    }        
       //修改你的showXY()代码function showXY(par){ 
    for(var i = -61;i <=62;i++){ 
    jsAddItemToSelect(par,i,i);
    } 
    } 
      

  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>
    <script language="JavaScript">
    <!--
    //比如你想在点击select之后，选择50的option
    var sel_value = 50 ;
    function showXY(par){ 
    if(par.options.length > 1) return ;

    for(var i = -61;i <=62;i++){ 
    var tmp = new Option(i,i); 
    par.options.add(tmp);
    if(i == sel_value) {
    tmp.selected = true ;
    }
    } 
    } 
    //-->
    </script>
    地图X： <select onclick="showXY(this);"> <option  value = "-62">-62 </option> </select>
    </body>
    </html>
      

  3.   

    <!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>
    <script language="JavaScript">
    <!--
    //比如你想在点击select之后，选择50的option
    var sel_value = 50 ;
    function showXY(par,sel_value){ 
    if(par.options.length > 1) return ;

    for(var i = -61;i <=62;i++){ 
    var tmp = new Option(i,i); 
    par.options.add(tmp);
    if(i == sel_value) {
    tmp.selected = true ;
    }
    } 
    } 
    //-->
    </script>
    地图X： <select onclick="showXY(this);"> <option  value = "-62">-62 </option> </select>
    </body>
    </html>
      

  4.   

    给select 加onclick也可以 就是无条件触发
    onchange 是你select 选择改变时触发而已
      

  5.   

    基本对 select 的所有操作：
    // 1.判断select选项中 是否存在Value="paraValue"的Item        
    function jsSelectIsExitItem(objSelect, objItemValue) {        
        var isExit = false;        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].value == objItemValue) {        
                isExit = true;        
                break;        
            }        
        }        
        return isExit;        
    }         
       
    // 2.向select选项中 加入一个Item        
    function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
        //判断是否存在        
        if (jsSelectIsExitItem(objSelect, objItemValue)) {        
            alert("该Item的Value值已经存在");        
        } else {        
            var varItem = new Option(objItemText, objItemValue);      
            objSelect.options.add(varItem);     
            alert("成功加入");     
        }        
    }        
       
    // 3.从select选项中 删除一个Item        
    function jsRemoveItemFromSelect(objSelect, objItemValue) {        
        //判断是否存在        
        if (jsSelectIsExitItem(objSelect, objItemValue)) {        
            for (var i = 0; i < objSelect.options.length; i++) {        
                if (objSelect.options[i].value == objItemValue) {        
                    objSelect.options.remove(i);        
                    break;        
                }        
            }        
            alert("成功删除");        
        } else {        
            alert("该select中 不存在该项");        
        }        
    }    
       
       
    // 4.删除select中选中的项    
    function jsRemoveSelectedItemFromSelect(objSelect) {        
        var length = objSelect.options.length - 1;    
        for(var i = length; i >= 0; i--){    
            if(objSelect[i].selected == true){    
                objSelect.options[i] = null;    
            }    
        }    
    }      
       
    // 5.修改select选项中 value="paraValue"的text为"paraText"        
    function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
        //判断是否存在        
        if (jsSelectIsExitItem(objSelect, objItemValue)) {        
            for (var i = 0; i < objSelect.options.length; i++) {        
                if (objSelect.options[i].value == objItemValue) {        
                    objSelect.options[i].text = objItemText;        
                    break;        
                }        
            }        
            alert("成功修改");        
        } else {        
            alert("该select中 不存在该项");        
        }        
    }        
       
    // 6.设置select中text="paraText"的第一个Item为选中        
    function jsSelectItemByValue(objSelect, objItemText) {            
        //判断是否存在        
        var isExit = false;        
        for (var i = 0; i < objSelect.options.length; i++) {        
            if (objSelect.options[i].text == objItemText) {        
                objSelect.options[i].selected = true;        
                isExit = true;        
                break;        
            }        
        }              
        //Show出结果        
        if (isExit) {        
            alert("成功选中");        
        } else {        
            alert("该select中 不存在该项");        
        }        
    }        
       
    // 7.设置select中value="paraValue"的Item为选中    
    document.all.objSelect.value = objItemValue;    
           
    // 8.得到select的当前选中项的value    
    var currSelectValue = document.all.objSelect.value;    
           
    // 9.得到select的当前选中项的text    
    var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
           
    // 10.得到select的当前选中项的Index    
    var currSelectIndex = document.all.objSelect.selectedIndex;    
           
    // 11.清空select的项    
    document.all.objSelect.options.length = 0;   
      

  6.   

    按照2楼的方法，问题已经解决了，但是改为onchange不行，而且之前我写的方法也是可以添加option的，只是在选的时候无效，不知道为什么