改变下拉列表的值

最新推荐文章于 2019-11-07 12:29:31 发布
最新推荐文章于 2019-11-07 12:29:31 发布
阅读量450 收藏
点赞数
分类专栏： ASP.NET 文章标签： .net

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>改变表格中文字的颜色，大小和表格的背景颜色</title>
    <style type="text/css">
    <!--
    body {
            background-color: #006666;
    }
    -->
    </style></head>

    <body>
    <p>背景颜色
      <select name="select" onChange='document.getElementById("kk").style.backgroundColor=this.options[this.options.selectedIndex].value'>
              <option value="#ffffff">背景颜色</option>
          <option value="#ff0000">背景红色</option>
          <option value="#ffffff">背景白色</option>
          <option value="blue">背景蓝色</option>
      </select>
    文字颜色
    <select name="select2" onChange='document.getElementById("kk").style.color=this.options[this.options.selectedIndex].value'>
      <option value="#000000">文字颜色</option>
        <option value="#ff0000">文字红色</option>
        <option value="#ffffff">文字白色</option>
        <option value="blue">文字蓝色</option>
    </select>
    文字大小
    <select name="select3" onChange='document.getElementById("kk").style.fontSize=this.options[this.options.selectedIndex].value'>
      <option value="12px">文字大小</option>
        <option value="12px">12px</option>
        <option value="14px">14px</option>
        <option value="18px">18px</option>
    </select>
    行距
    <select name="select4" onChange='document.getElementById("kk").style.lineHeight=this.options[this.options.selectedIndex].value'>
      <option  value="12px">行距大小</option>
      <option value="18px">18px</option>
      <option value="24px">24px</option>
      <option value="36px">36px</option>
    </select>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="200" height="200" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF" id="kk">改变表格中文字的颜色，大小和表格的背景颜色。</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

//

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>改变表格中文字的颜色，大小和表格的背景颜色</title>
    <style type="text/css">
    <!--
    body {
            background-color: #006666;
    }
    -->
    </style>
    <script type="text/javascript">
    function $(objId){return document.getElementById(objId);}
    function initiate() {
    $("kk").style.backgroundColor=getCookie("bgcolor");
    $("kk").style.color=getCookie("color");
    $("kk").style.fontSize=getCookie("size");
    $("kk").style.lineHeight=getCookie("lineheight");
    }
    function setCookie(name, value, hours) {
            var expire = "";
            if(hours != null) {
                    expire = new Date((new Date()).getTime() + hours * 3600000);
                    expire = "; expires=" + expire.toGMTString();
            }
            document.cookie = name + "=" + value + expire;
    }
    function getCookie(Name) {
    var re=new RegExp(Name+"=([^;]*)(;|$)");
    var tmp=re.exec(document.cookie);
    if(tmp)
    return tmp[1];
    return null;
    }
    function savebgcolor(obj){
    $("kk").style.backgroundColor=obj.options[obj.options.selectedIndex].value;
    setCookie("bgcolor",obj.options[obj.options.selectedIndex].value,24);
    }
    function savecolor(obj){
    $("kk").style.color=obj.options[obj.options.selectedIndex].value;
    setCookie("color",obj.options[obj.options.selectedIndex].value,24);
    }
    function savesize(obj){
    $("kk").style.fontSize=obj.options[obj.options.selectedIndex].value;
    setCookie("size",obj.options[obj.options.selectedIndex].value,24);
    }
    function savelineheight(obj){
    $("kk").style.lineHeight=obj.options[obj.options.selectedIndex].value;
    setCookie("lineheight",obj.options[obj.options.selectedIndex].value,24);
    }
    </script>
    </head>

    <body οnlοad="initiate()">
    <p>背景颜色
      <select name="select" onChange='savecolor(this)'>
              <option value="#ffffff">背景颜色</option>
          <option value="#ff0000">背景红色</option>
          <option value="#ffffff">背景白色</option>
          <option value="blue">背景蓝色</option>
      </select>
    文字颜色
    <select name="select2" onChange='savecolor(this)'>
      <option value="#000000">文字颜色</option>
        <option value="#ff0000">文字红色</option>
        <option value="#ffffff">文字白色</option>
        <option value="blue">文字蓝色</option>
    </select>
    文字大小
    <select name="select3" onChange='savesize(this)'>
      <option value="12px">文字大小</option>
        <option value="12px">12px</option>
        <option value="14px">14px</option>
        <option value="18px">18px</option>
    </select>
    行距
    <select name="select4" onChange='savelineheight(this)'>
      <option  value="12px">行距大小</option>
      <option value="18px">18px</option>
      <option value="24px">24px</option>
      <option value="36px">36px</option>
    </select>
    </p>
    <p>　</p>
    <p>　</p>
    <table width="200" height="200" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF" id="kk">改变表格中文字的颜色，大小和表格的背景颜色。</td>
      </tr>
    </table>
    <p>　</p>
    </body>
    </html>

laoyingat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery更改下拉列表的选定值
asdfgh0077的博客
12-19 2309
我有一个带有已知值的下拉列表。 我正在尝试将下拉列表设置为使用jQuery知道的特定值。 使用常规JavaScript，我会做类似的事情： ddl = document.getElement
下拉框获取值及修改值
qq_37246121的博客
07-09 2200
获取下拉框 text  $('.WFNAME').find("option:selected").text(), DropDownlist控件select下拉框 &lt;select id="WFNAME" multiple="multiple" class="easyui-combobox" name="WFNAME" style="width:200px;" &gt; 
jquery修改下拉框的值
u010786200的博客
04-21 4201
下拉框html代码 选择产品： 请选择 请选择 ${plan.title!} 处理下拉框值改变的两种方式： 第一种：function selectFn(_this,divID){ var numDIV=document.getElementById(divID);
javascript获取下拉列表框当中的文本值示例代码
10-27
需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，下面与大家分享下如何使用js获取下拉列表框文本值，由此需求的朋友可以参考下
ajax实现输入框文字改变展示下拉列表的效果示例
12-11
`onmousedown`事件绑定在`<li>`元素上，当用户点击列表项时，`getValue`函数被调用，将选定的值传递到相应的输入框，并更新隐藏的ID字段，同时隐藏下拉列表。 Ajax是Asynchronous JavaScript and XML（异步...
LabVIEW实现下拉列表菜单
03-01
在编程方面，可以通过事件结构来响应下拉列表的选择改变事件。当用户在下拉列表中选择一个新项时，对应的事件结构将被触发，你可以在此编写代码来处理用户的选取，比如更新其他界面元素，执行相应的函数，或者保存...
jQuery实现多级联动下拉列表查询框
11-23
在本文中，我们将深入探讨如何使用jQuery来实现一个多级联动的下拉列表查询框。这个功能常用于网站上的筛选和过滤，例如在选择产品时，用户先选择品牌，然后根据选择的品牌进一步选择型号。这样的设计可以提高用户...
jQuery 操作下拉列表框实现代码
10-29
这段代码会在下拉列表的选项改变时打印出新选中的值和文本。 总结来说，jQuery 提供了强大的工具来轻松地操作下拉列表框，使得开发者能够快速实现诸如获取选项、修改选项、添加删除选项等功能，从而提高开发效率和...
select下拉菜单修改显示的内容
miss_jing18的博客
05-15 7968
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;下拉菜单修改DIV显示的内容&lt;/title&gt; &lt;/head&gt; &lt;scri
如何取select标签改变前后的值
Mr_Runner的博客
11-21 4558
问题：如何取select标签改变前后的值 解决方案：如下代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;select onmousedown="onmousedownFunction(this)" onchange="onchangeFunction(this)"&gt; &lt;option value="A&q
选择一个下拉框值，改变另一个下拉框的值
11-07 2727
<!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> <m...
easyui下拉框值改变
漫天雪_昆仑巅
12-07 2576
EasyUI在web开发中常用到，下拉框是表单元素的一种， 时效帐号 永久有效 如有需要设置下拉框值改变事件，按照平常的思路就是给加个onChange事件就可以了，然而EasyUI的"easyui-combobox" 却非是这样。具体实现： $("#consumerType").combobox({
textContent和innerText属性的区别
热门推荐
dexing07的博客
09-12 2万+
实例1：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </meta> </head> <body> <div class="test" id="test"> tes
unity 下拉列表框 切换不同的options改变输出的值 示例代码
最新发布
05-30
以下是一个简单的示例代码，演示如何在Unity中实现一个下拉列表框，并根据不同的选项更改输出值： ``` using UnityEngine; using UnityEngine.UI; using System.Collections.Generic; public class DropdownController : MonoBehaviour { public Dropdown dropdown; // UI Dropdown public Text outputText; // UI Text public List<string> options; // 下拉列表框的选项 public string selectedOption; // 当前选中的选项的值 void Start() { // 将下拉列表框选项赋值给UI Dropdown dropdown.AddOptions(options); } // 当下拉列表框的选项更改时调用 public void OnDropdownValueChanged(Dropdown dropdown) { // 获取当前选中的选项的值 selectedOption = options[dropdown.value]; // 更新UI Text的文本显示 outputText.text = "Current selection: " + selectedOption; } } ``` 在此示例中，我们定义了一个公共Dropdown和Text变量，用于引用UI Dropdown和UI Text。我们还定义了一个公共字符串列表，用于存储下拉列表框的选项，以及一个公共字符串变量，用于存储当前选中的选项的值。 在Start()方法中，我们将下拉列表框的选项赋值给UI Dropdown。 在OnDropdownValueChanged()方法中，我们获取当前选中的选项的值，并更新UI Text的文本显示。我们还将选中的选项的值赋值给定义的字符串变量。此方法将在UI Dropdown的onValueChanged事件中调用。 您可以将此脚本附加到UI Dropdown上，并在Inspector视图中设置选项和引用UI Text。这样，当用户更改下拉列表框的选项时，将显示当前选中的选项的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值