`
yuexiaowen
  • 浏览: 124763 次
  • 性别: Icon_minigender_2
  • 来自: 咸阳
社区版块
存档分类
最新评论

怎样用js变化select下拉员的值

阅读更多
<script type="text/javascript">
    var message = "${message}";
   if(message.length>0){
     alert(message);
    }
     function showDiv(){
     var type="${linkType}";
     var selectValue = document.getElementById("selectName");
     var div = document.getElementById("back1");
     var div1 = document.getElementById("back2");
     var div2 = document.getElementById("back3");
    if(type!=null){
      if(type=="1"){
    div.style.display = "block";
    selectValue.options[0].text = "aa";
    div2.style.display = "none";
    div1.style.display = "none";
     }
    if(type=="2"){
        var optionValue = document.getElementById("option2");
       // selectValue.text = "教育部专业网站";
       // optionValue.text = "教育部专业网站";
//改变select下来源显示的值,但这样做老是不成功,希望有人帮我,当我传的option中的value值不一样时,select显示的value也跟着变化
        selectValue.options[1].text = "bb";
    div.style.display = "none";
    div2.style.display = "none";
     div1.style.display = "block";
    
    }
    if(type=="3"){
    div.style.display = "none";
    div1.style.display = "none";
    div2.style.display = "block";
    selectValue.options[2].text = "cc";
     }
    }
    }
  function showFriendLink(num){ 
   var div = document.getElementById("back1");
   var div1 = document.getElementById("back2");
   var div2 = document.getElementById("back3");
    if(num=="1"){
    div.style.display = "block";
    div2.style.display = "none";
    div1.style.display = "none";
    }
    if(num=="2"){
    div.style.display = "none";
    div2.style.display = "none";
    div1.style.display = "block";
    }
    if(num=="3"){
    div.style.display = "none";
    div1.style.display = "none";
    div2.style.display = "block";
    }
  }
</script>



<select id="selectName" name="selectName"  onchange="showFriendLink(this.options[this.selectedIndex].value)">
                                                    <option id="option1"  value="1">aa</option>
                                                    <option id="option2"  value="2">bb</option>
                                                    <option id="option3"  value="3">cc</option>
                                              </select>
分享到:
评论

相关推荐

    javascript获取下拉列表的值

    在JavaScript中,获取下拉列表(也称为选择框或`&lt;select&gt;`元素)的值是一项常见的任务,特别是在处理用户输入和交互时。本篇博文中,我们将深入探讨如何有效地实现这一功能。 首先,我们需要理解HTML中的`&lt;select&gt;`...

    DIV+CSS+JS仿Select下拉表单

    在网页设计中,"DIV+CSS+JS仿Select下拉表单"是一种常见的技术,用于创建自定义且具有更丰富交互性的下拉选择组件。这种技术通常用来替代原生HTML中的`&lt;select&gt;`元素,因为它提供了更多的设计自由度和用户体验优化的...

    js实现下拉列表选中某个值的方法(3种方法)

    JavaScript实现下拉列表选中某个值的方法主要包括三种方式,分别为通过索引选择、通过name或id选择以及通过value值选择。以下详细阐述每种方法的实现原理和步骤。 首先,了解基本的HTML结构,一个下拉列表通常由一...

    jquery如何自定义select下拉样式

    例如,我们可以监听`select2:select`事件来响应用户的选择变化。 ```javascript $('select').on('select2:select', function (e) { var data = e.params.data; console.log('选定的值:', data.id, ', 文本:', ...

    仿Select下拉表单 下拉表单

    3. **FixedMenu.js**:JavaScript文件,负责处理仿Select下拉表单的动态行为,如打开和关闭下拉列表,处理用户选择,以及可能的动画效果。 4. **CJL.0.1.min.js**:这可能是一个压缩过的JavaScript库,提供了一些...

    Jquery实现select下拉列表根据radio选项级联

    接下来,我们将使用jQuery来监听radio按钮的变化,并根据选中的值改变相应的select下拉列表。以下是一个基本的实现示例: ```javascript $(document).ready(function() { // 首先,我们需要在页面加载时初始化下拉...

    selectbox Js实现的下拉复选框

    实现Selectbox的关键在于用JavaScript动态创建和管理选项。首先,我们需要将原始的复选框替换为隐藏的`&lt;select&gt;`元素,然后为每个原始复选框创建对应的`&lt;option&gt;`。接着,使用JavaScript监听`&lt;select&gt;`元素的`change...

    Select2实现全国省市区三级联动下拉菜单

    引入CSS和JS文件后,记得在页面中添加jQuery库,因为`Select2`是基于jQuery的。 2. **HTML结构** 创建一个基础的HTML结构,包括三个`&lt;select&gt;`元素,分别代表省份、城市和区县。每个`select`元素都有对应的ID,...

    手动样式仿select下拉列表框

    "手动样式仿select下拉列表框"就是一个这样的实践,它通过CSS和JavaScript等技术,使得原本样式单一的SELECT元素变得更为美观、交互性强。 在传统的HTML中,SELECT元素用于创建下拉列表,但其默认样式受到浏览器的...

    美漂亮的实用div+css模仿select下拉控件

    在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...

    jQuery插件 stylish-select 完全自定义的select下拉列表.zip

    《jQuery插件 stylish-select:构建完全自定义的select下拉列表》 在Web开发中,Select元素是不可或缺的一部分,但其默认样式往往无法满足设计师和开发者对于界面美观度的需求。这时,jQuery插件stlish-select...

    JS下拉按钮列表控件

    在JavaScript(JS)中,下拉按钮列表控件是一种常见的用户界面元素,它允许用户从一组预定义的选项中选择一个。这种控件通常用于节省屏幕空间,特别是在移动设备上,因为它们可以将大量信息封装在一个小的交互区域。...

    js 动态新增改变删除select的值

    #### 标题:js 动态新增改变删除select的值 在网页开发中,`&lt;select&gt;`元素是非常常见的表单元素之一,用于提供下拉列表供用户选择。JavaScript 提供了丰富的 API 来操作 `&lt;select&gt;` 元素及其选项。本文将详细讲解...

    jquery select 选中值设置左右select选择互换

    要实现选中值的互换,我们需要借助jQuery的`val()`方法来获取或设置选中项的值,以及`change`事件来监听用户的选择变化。以下是一个简单的互换逻辑实现: ```javascript $(document).ready(function() { // 监听...

    JQ JS javascript layui UI框架 带搜索下拉框 select

    本示例中,"JQ JS javascript layui UI框架 带搜索下拉框 select" 是一个基于jQuery和layui的特定功能实现,即在layui的UI设计中创建了一个具有搜索功能的下拉选择框。这个功能在许多网页应用中都很常见,例如在表单...

    JS+HTML联动下拉菜单

    在创建联动下拉菜单时,我们会用到`&lt;select&gt;`和`&lt;option&gt;`标签来定义下拉列表。例如: ```html &lt;select id="parentSelect"&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 &lt;/select&gt; ...

    select下拉检索插件修改版.zip

    "select下拉检索插件修改版.zip" 提供的正是这样一种解决方案,它是一个针对HTML `&lt;select&gt;` 元素的增强插件,旨在改善原始下拉框的搜索功能。这个压缩包包含了两个核心文件:searchableSelect.css 和 jquery....

    bootstrapselect下拉框js,css

    下面将详细介绍 Bootstrap Select 的使用方法、核心功能以及与 JavaScript(js)和 CSS 的关联。 1. **安装与引入** 要使用 Bootstrap Select,首先确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件,以及 ...

    select2插件联动查询用到的css和js文件

    综上所述,通过引入select2.css和select2.js,结合适当的JavaScript代码,我们可以实现Select2插件的联动查询功能。在实际项目中,确保这两个文件被正确引用,并根据项目需求进行适当的配置和定制。

    下拉多选控件CheckboxSelect_v2.8.8

    《原生JavaScript实现的下拉多选控件CheckboxSelect_v2.8.8详解》 在Web开发中,下拉多选控件是常见的交互元素,它能够为用户提供方便的选择多个选项的功能。CheckboxSelect_v2.8.8是一款基于原生JavaScript编写的...

Global site tag (gtag.js) - Google Analytics