• javascript之HTML(select option)详解


    一、基础理解:

    var e = document.getElementById("selectId");

    e. options= new Option("文本","值") ;

    //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>

    //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

    1:options[ ]数组的属性:

    length属性---------长度属性

    selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)

    2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)

    text属性---------返回/指定 文本

    value属性------返回/指定 值,与<options value="...">一致。

    index属性-------返回下标,

    selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false,可以动态的改变选中项

    defaultSelected 属性-----返回该对象默认是否被选中。true / false。

    3:option的方法

    增加一个<option>标签-----obj.options.add(new("文本","值"));<增>

    删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>

    获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>

    修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>

    删除所有<option>标签-----obj.options.length = 0

    获得一个<option>标签的值-----obj.options[obj.selectedIndex].value

    注意:

    a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.

    b:obj.option中的option不需要大写,new Option中的Option需要大写

    二 、应用

    <html>
    <head>
    <script language="javascript">
    function number(){
    var obj = document.getElementById("mySelect");
    //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变
    //obj.options.add(new Option("我的吃吃","4"));再添加一个option
    //alert(obj.selectedIndex);//显示序号,option自己设置的
    //obj.options[obj.selectedIndex].text = "我的吃吃";更改值
    //obj.remove(obj.selectedIndex);删除功能
    }
    </script>
    </head>
    <body>
    <select id="mySelect">
    <option>我的包包</option>
    <option>我的本本</option>
    <option>我的油油</option>
    <option>我的担子</option>
    </select>
    <input type="button" name="button" value="查看结果" onclick="number();">
    </body>
    </html>

    1.动态创建select

          function createSelect(){

           var mySelect = document.createElement("select");
    mySelect.id = "mySelect";
    document.body.appendChild(mySelect);
    }

    2.添加选项option

         function addOption(){

              //根据id查找对象,
    var obj=document.getElementById('mySelect');

               //添加一个选项
    obj.add(new      Option("文本","值"));    //这个只能在IE中有效
    obj.options.add(new Option("text","value")); //这个兼容IE与firefox
    }

    3.删除所有选项option

         function removeAll(){
    var obj=document.getElementById('mySelect');

    obj.options.length=0;

         }

    4.删除一个选项option

    function removeOne(){
    var obj=document.getElementById('mySelect');

               //index,要删除选项的序号,这里取当前选中选项的序号

            var index=obj.selectedIndex;
    obj.options.remove(index);
    }

    5.获得选项option的值

    var obj=document.getElementById('mySelect');

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

    var val = obj.options[index].value;

    6.获得选项option的文本

    var obj=document.getElementById('mySelect');

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

    var val = obj.options[index].text;

    7.修改选项option

    var obj=document.getElementById('mySelect');

    var index=obj.selectedIndex; //序号,取当前选中选项的序号

    var val = obj.options[index]=new Option("新文本","新值");

    8.删除select

          function removeSelect(){
    var mySelect = document.getElementById("mySelect");
    mySelect.parentNode.removeChild(mySelect);
    }

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html">
    <head>
    <script language=JavaScript>
    function $(id)
    {
    return document.getElementById(id)
    }

    function show()
    {
    var selectObj=$("area")
    var myOption=document.createElement("option")
    myOption.setAttribute("value","10")
    myOption.appendChild(document.createTextNode("上海"))

    var myOption1=document.createElement("option")
    myOption1.setAttribute("value","100")
    myOption1.appendChild(document.createTextNode("南京"))

    selectObj.appendChild(myOption)
    selectObj.appendChild(myOption1)

    }

    function choice()
    {
    var index=$("area").selectedIndex;
    var val=$("area").options[index].getAttribute("value")

    if(val==10)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var sh=document.createElement("select")
    sh.add(new Option("浦东新区","101"))
    sh.add(new Option("黄浦区","102"))
    sh.add(new Option("徐汇区","103"))
    sh.add(new Option("普陀区","104"))
    $("context").appendChild(sh)

    }

    if(val==100)
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    var nj=document.createElement("select")
    nj.add(new Option("玄武区","201"))
    nj.add(new Option("白下区","202"))
    nj.add(new Option("下关区","203"))
    nj.add(new Option("栖霞区","204"))
    $("context").appendChild(nj)
    }
    }

    function calc()
    {
    var x=$("context").childNodes.length-1;
    alert(x)

    }

    function remove()
    {
    var i=$("context").childNodes.length-1;
    var remobj=$("context").childNodes[i];
    remobj.removeNode(true)
    }
    </script>
    <body>

    <div id="context">
    <select id="area" on

    change="choice()">
    </select>
    </div>
    <input type=button value="显示" onclick="show()">
    <input type=button value="计算结点" onclick="calc()">
    <input type=button value="删除" onclick="remove()">
    </body>
    </html>



    根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:

    JS代码:(只取了于SELECT相关的代码)
    /**
    * @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
    * @prarm selectId 下拉列表的ID
    * @prarm method 要调用的方法名称
    * @prarm temp 此处存放软件ID
    * @prarm url 要跳转的地址
    */
    function linkAgeJson(selectId,method,temp,url){  
    $j.ajax({   
    type: "get",//使用get方法访问后台
    dataType: "json",//返回json格式的数据
    url: url,//要访问的后台地址
    data: "method=" + method+"&temp="+temp,//要发送的数据       
    success: function(msg){//msg为返回的数据,在这里做数据绑定
    var data = msg.lists;
    coverJsonToHtml(selectId,data);            
    }
    });
    }

    /**
    * @description 将JSON数据转换成HTML数据格式
    * @prarm selectId 下拉列表的ID
    * @prarm nodeArray 返回的JSON数组
    *
    */
    function coverJsonToHtml(selectId,nodeArray){
    //get select
    var tempSelect=$j("#"+selectId);
    //clear select value
    isClearSelect(selectId,'0');  
    var tempOption=null;
    for(var i=0;i<nodeArray.length;i++){
    //create select Option
    tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
    //put Option to select
    tempSelect.append(tempOption);
    }
    // 获取退化构件列表
    getCpgjThgl(selectId,'thgjDm');
    }
    /**
    * @description 清空下拉列表的值
    * @prarm selectId 下拉列表的ID
    * @prarm index 开始清空的下标位置
    */
    function isClearSelect(selectId,index){
    var length=document.getElementById(selectId).options.length;
    while(length!=index){
    //长度是在变化的,因为必须重新获取
    length=document.getElementById(selectId).options.length;
    for(var i=index;i<length;i++)
    document.getElementById(selectId).options.remove(i);
    length=length/2;
    }
    }

    /**
    * @description 获取退化构件列表
    * @prarm selectId1 引用软件下拉列表的ID
    * @prarm selectId2 退化构件下拉列表的ID
    */
    function getCpgjThgl(selectId1,selectId2){
    var obj1=document.getElementById(selectId1);//引用软件下拉列表
    var obj2=document.getElementById(selectId2);//退化构件下拉列表
    var len=obj1.options.length;
    //当引用软件列表长度等于1时返回,不做操作
    if(len==1){
    return false;
    }
    //清空下拉列表的值,两种方式都可以
    // isClearSelect(selectId2,'1');
    document.getElementById(selectId2).length=1;
    for(var i=0;i<len; i++){
    var option= obj1.options[i];
    //引用软件被选中项不加入
    if(i!=obj1.selectedIndex){
    //克隆OPTION并添加到SELECT中 
    obj2.appendChild(option.cloneNode(true));
    }
    }

    }




    HTML代码:

    <TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
    <tr>
    <td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件:</td>
    <td class="Search_content_82">
    <input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
    <input name="yyrjDm" id="yyrjDm" type="hidden" >
    <input type="button" class="Search_button_select"
    onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
    </td>
    </tr>
    <tr>
    <td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版:</td>
    <td class="Search_content" id="yyfb">
    <select name="yyfbDm" style="160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">

    </select>
    </td>
    </tr>
    <tr>
    <td class="Search_item">退化构件:</td>
    <td class="Search_content" id="thgj">
    <select name="thgjDm" style="160" id="thgjDm">
    <option value="-1" selected>无</option>
    </select>
    </td>
    </tr>
    </TABLE>
  • 相关阅读:
    2019 icpc南昌全国邀请赛-网络选拔赛J题 树链剖分+离线询问
    Android小项目之十二 设置中心的界面
    【Mood-5】14条建议,使你的IT职业生涯更上一层楼
    【Android 界面效果15】Android UI 之一步步教你自定义控件(自定义属性、合理设计onMeasure、合理设计onDraw等)
    单线程模型中Message、Handler、Message Queue、Looper之间的关系
    140个google面试题
    Android小项目之十一 应用程序的主界面
    Android小项目之十 应用程序更新的签名问题
    Android小项目之九 两种上下文的区别
    Android小项目之八 界面细节
  • 原文地址:https://www.cnblogs.com/kingangWang/p/2299791.html
Copyright © 2020-2023  润新知