📄 ex11-13.htm

📁 《JAVASCRIPT 动态网页编程实例手册》一书中的源代码

💻 HTM

字号:

    <html><head><title>选择列表-select对象演示 </title>
    <script language="JavaScript">
        function display(f){
            var i=0;
            if (f.listbox1.multiple) {
               for (var j=0;j<f.listbox1.length;j++){
                 if (f.listbox1.options[j].selected){
                    i=j;
                    break;
                 }
               }
             }
             else
               i=f.listbox1.selectedIndex;
           
            f.text1.value=f.listbox1.options[i].value;
            var str="选项列表的名称为："+f.listbox1.name;
            str+="\n选项列表的类型为："+f.listbox1.type;
            str+="\n列表项的个数为："+f.listbox1.length;
            str+="\n当前选中的列表项为："+f.listbox1.selectedIndex;
            str+="\n当前选项的提示文字为："+f.listbox1.options[i].text;
            str+="\n当前选项的multiple属性值为："+f.listbox1.multiple;
            f.text2.value=str
        }
    </script>
    <body bgcolor=lightgreen>
    <font face=宋体 >
    <b>
    <form name="form1">
    请选择作品：<br>
        <select name="listbox1" size="4" onChange="display(this.form)">
            <option name="choice1" value="贾宝玉 林黛玉 薛宝钗 秦钟">红楼梦 </option>
            <option name="choice2" value="唐三藏 孙悟空 猪八戒 沙和尚" selected >西游记</option>
            <option name="choice3" value="曹操 刘备 孙权 诸葛亮">三国演义</option>
            <option name="choice4" value="宋江 武松 鲁智深 潘金莲">水浒传</option>
        </select><p>
    人物列表：<br>
    <input type="text" name="text1" size=60 ><br>
    select对象的属性：<br>
    <TEXTAREA name="text2" rows=8 cols=60> 
    </TEXTAREA> <br>    
    <input type="checkbox" name="onoff" 
    onchange="javascript:document.form1.listbox1.multiple= !document.form1.listbox1.multiple "
    >允许列表框多项选择<br>
    </form>
    </body></html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -