jquery 获取数组的选择选项

2024-02-02

我有点坚持一个 - 大概很容易解决问题。

我想创建将用于网站上所有选择元素的代码。

根据分配给“选项”的“标签”属性,我想隐藏所有其他“div”元素,这些元素的类与此特定“选择”菜单中“选项”的其他“标签”值相同。

让我演示一下:

<select class="sel_depend" id="reg_where_heard" name="where_heard">
    <option value="">Select one…</option>
    <option value="1">Google</option>
    <option value="2">Yahoo</option>
    <option value="3" label="where_heard_magazine">Magazine</option>
    <option value="4" label="where_heard_other">Other</option>
</select>

<div class="where_heard_magazine dn">
    <input type="text" name="magazine" id="magazine" value="" />
</div>
<div class="where_heard_other dn">
    <input type="text" name="other" id="other" value="" />
</div>

现在 - 菜单下的 div 中的“dn”类只分配了“display:none”。

根据所选选项 - 如果它的值为 3 - 我希望与要显示的标签具有相同类的 div - 那么如果我选择值为 4 的选项 - 所有其他 div(其中类名将从所有选项填充)这个选择元素)应该隐藏()并且只选择显示()。

我不太确定如何将特定“选择”元素的所有“选项”元素放入数组中。 然后大概我可以使用each()语句循环它并找出它们是否有“标签”,如果有的话-隐藏与它的值匹配的类的元素。

然后在循环之后,我可以显示具有与所选“选项”的“标签”参数值匹配的类的元素。

知道如何实现这一目标吗?


给与特定选择相关的所有 div 一个作为该元素名称的类。那么你可以这样做:

$('.sel_depend').change(function(){
    var class = $(this).attr('name');
    $('.' + class).hide();
    var divToShowClass = $(this).find(':selected').attr('label');
    $('.' + divtoShowClass).show();

});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery 获取数组的选择选项 的相关文章

  • Highcharts 异步服务器加载多个系列

    我正在尝试按照其示例使用 Highcharts 的延迟加载 http www highcharts com stock demo lazy loading http www highcharts com stock demo lazy lo
  • 需要帮助获取嵌套的 ruby​​ 哈希层次结构

    我有哈希深层嵌套哈希 我希望每个键的层次结构 父到子 作为数组 例如 hash properties gt one gt extra headers gt type gt object type1 gt object2 entity gt
  • jQuery - 将日期选择器的容器设置为特定的 div

    我在 div 上使用 jQuery UI 日期选择器 div通过移动鼠标隐藏和显示 因为日期选择器存在于末尾标签 不在我的 div 内 当我将鼠标移动到日期选择器时 div 消失 我像这样加载了日期选择器 JavaScript dt1 da
  • 在事件处理程序中获取选择器

    我回答了这个问题 https stackoverflow com questions 6469116 asp net checkbox 6469251 6469251使用以下 jQuery 代码 input type checkbox na
  • php按值复制数组元素,而不是按引用

    我有以下代码 data x this gt x gt getResults data y data x some code here to modify data y this causes undesirably data x to be
  • 防止 jQuery 中的双重表单提交

    我有一个用户用来输入有关发布信息的表单 完成后 他们单击 保存 进行更新 然而 在极少数情况下 15 000 条记录中的 10 条 用户双击保存按钮并导致双重表单提交 从而导致发布的项目重复 我尝试用它来防止它 input type sub
  • DIV 上的 jQuery 验证插件

    我正在尝试使用验证插件 http bassistance de jquery plugins jquery plugin validation 在 div 上 如答案所示这个问题 https stackoverflow com questi
  • 多图上传及预览

    我正在学习如何上传多个图像并显示它们的预览 我遇到了以下代码
  • 从数组中选择每第 n 个项目

    最会是什么高效的如何从大数组中选择每第 n 个项目 有没有一种 聪明 的方法来做到这一点 或者循环是唯一的方法 需要考虑的一些要点 该数组相当大 有 130 000 个项目 我必须选择每 205 个项目 这些项目没有数字索引 因此for i
  • 如何在 jQuery 中声明和使用函数

    我想知道如何在 jQuery 脚本中声明函数 我现在拥有的 function adjust menu alert test test 但是当我这样称呼它时 first link click function adjust menu 它不起作
  • 单击锚标记添加一个类

    假设我有以下 HTML a class active href section1 Link 1 a a href section2 Link 2 a 单击链接 2 时 我希望它接收活动类并从链接 1 本身中删除该类 这样它实际上会变成 a
  • AngularJS,使用没有后退按钮刷新的路由

    我在用着angularJS使用 AJAX 构建一个简单的单页应用程序 但是当用户使用本机后退按钮时我遇到了问题 angular module myApp ionic myApp controllers myApp services conf
  • 使用 Laravel 在 Bootstrap 模式中动态加载表单

    我正在开发应用程序 它需要引导模式中的表单 并且还动态加载表单 我面临的问题是所有页面都再次以模式加载 这里有人为此提供任何例子吗 控制器 public function loadJsModalForm return View make f
  • 如何使用 !important 使用 jquery 覆盖内联样式?

    我有一个 p style color red important sample text here p 然后我想在 JQuery 中覆盖该样式 我该怎么做 using important在 CSS 中显然行不通 但还是尝试了 我在想我是否可
  • Django 星级评定系统和 AJAX

    我正在尝试在 Django 网站上实现星级评级系统 在我的模型中存储评级是排序的 就像在页面上显示分数一样 但我希望用户能够对页面进行评分 基本上从 1 到 5 而无需刷新或更改页面 我发现了以下内容 并且喜欢这里明星的风格 http jv
  • jquery 自动完成功能不起作用

    有人可以告诉我为什么我的 jquery 自动完成代码不起作用吗 这是我的 JavaScript 代码
  • 从数组中提取值并将其转换为字符串的最佳方法是什么(允许 ES6)?

    我正在尝试采用这样的数组 location Id 000 000 Name Foo Id 000 001 Name Bar etc 提取 Id 并将它们组合成单个字符串 同时在每个值前面附加一个静态字符串 myId 的最有效 最干净的方法是
  • Numpy 附加到一个空数组

    第一种情况 gt gt gt import numpy as np gt gt gt x np array 0 gt gt gt x np append x 1 gt gt gt x array 0 1 x包含 2 个元素 这是为什么 第二
  • Jquery 验证,在submitHandler() 中单击获取按钮

    我有两个按钮type Submit 验证后 在submitHandler我想知道点击了这些按钮中的哪一个 根据这一点 我想禁用该按钮 Handler add customer validate rules name required tru
  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty

随机推荐