在带有淘汰赛的选择中更改事件

2023-11-25

我有一个问题,如何调用 onchanges 敲 js 到我的选择选项,我已经有一个函数和 html,但是当我选择选择选项时,没有任何变化

<select data-bind="event:{change:setSelectedStation() },
                   options: seedData,
                   optionsText: 'text',
                   optionsValue: 'value'">
</select>

这是我的功能

setSelectedStation: function(element, KioskId){
     this.getPopUp().closeModal();
     $('.selected-station').html(element);
     $('[name="popstation_detail"]').val(element);
     $('[name="popstation_address"]').val(KioskId);

     $('[name="popstation_text"]').val(element);
     // console.log($('[name="popstation_text"]').val());
     this.isSelectedStationVisible(true);
},

使用淘汰赛的双向数据绑定,而不是手动订阅 UI 事件。

淘汰赛valuedata-bind 监听 UI 更改并自动为您跟踪最新值。

您无需通过 jQuery 方法替换 HTML,而是使用text, attr和别的value每当您的选择发生变化时,绑定就会更新 UI。

如果您想在选择更改时执行其他工作(例如关闭弹出窗口),您可以subscribe到选定的值。

var VM = function() {
  this.seedData = [
    { 
      text: "Item 1",
      data: "Some other stuff"
    },
    { 
      text: "Item 2",
      data: "Something else"
    },
    { 
      text: "Item 3",
      data: "Another thing"
    }
  ];
  
  this.selectedItem = ko.observable();
  
  this.selectedItem.subscribe(function(latest) {
    console.log("Input changed");
  }, this);
};

ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="
        value: selectedItem,
        options: seedData,
        optionsText: 'text'">
</select>

<!-- ko with: selectedItem -->
<p>
  Your selection: <span data-bind="text: data"></span>
</p>
<!-- /ko -->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在带有淘汰赛的选择中更改事件 的相关文章

  • 每n秒执行一次函数

    我制作了这个在 10 秒后点击链接的代码片段 function timeout window setTimeout function img left click 1000 setTimeout timeout 1000 timeout 我
  • 将 SVG 路径转换为绝对命令

    给定一个 SVG Path 元素 如何将所有路径命令转换为绝对坐标 例如 转换此路径
  • 为动态加载的 HTML 内容触发 Bootstrap JS 行为

    我正在动态加载包含 Bootstrap 标记的 HTML 模板 但是 Bootstrap Javascript 行为不会应用于加载的内容 例如 如果加载的内容包含 Bootstrap 模式的标记 则该模式将无法正确运行 有没有办法可以触发
  • jslint 配置 |传递全局变量

    我如何提醒 jshint 我有全局变量 即命名它们 我知道你可以做到这一点 但我不记得语法了 我在这里定义了一个全局的 function window glob1 local var 稍后像这样使用 不同的 IIFE function gl
  • Angular UI-Router:多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的
  • 为什么 str.substr(0,4) 不是函数?

    我正在用 jQuery 制作一个脚本 我得到了以下数字7 2387 我所拥有的只是得到7 23 为此我编写了以下代码 var str 7 2387 var shorter str substr 0 4 但我收到这个错误 all js 55
  • 未捕获的异常:数据表编辑器 - 不允许远程托管代码

    我正在尝试使用 Datatables 使用 datatableseditor 来实现 CRUD 操作 但是我收到错误消息 1 未捕获的异常 数据表编辑器 不允许远程托管代码 请参见http editor datatables net有关如何
  • Ajax 内容和 jQuery 动画效果

    我正在尝试使用 jQuery 动画效果为 WordPress 帖子制作 Ajax 内容 问题是第一个动画 在本例中 fadeOut 工作正常 但第二个 FadeIn 或我尝试使用的任何动画效果没有对新内容生效 加载的内容只是出现 没有任何效
  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单
  • 使用 JavaScript 防止网页导航离开

    如何使用 JavaScript 防止网页导航离开 Using onunload允许您显示消息 但不会中断导航 因为为时已晚 然而 使用onbeforeunload将中断导航 window onbeforeunload function re
  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能
  • JQuery $.ajax() 在 java servlet 中发布数据

    我想将数据发送到 java servlet 进行处理 数据将具有可变长度并采用键 值对 A1984 1 A9873 5 A1674 2 A8724 1 A3574 3 A1165 5 数据不需要这样格式化 这就是我现在的方式 var sav
  • Javascript location.href 到 mailto 触发 GET HTTP,该 HTTP 在 Chrome 中被取消

    我有一个按钮可以触发以下 javascript 函数 function sendEmail var mail mailto email protected cdn cgi l email protection location href m
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • 在循环中调用 setTimeout 未按预期工作

    下面的 JavaScript 应该 在我看来 以 0 5 秒的间隔播放一系列音符 但它会将它们全部作为一个同时的和弦来演奏 知道如何修复它吗 function playRecording if notes length gt 0 for v
  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 根据文本内容从 jquery 对象中过滤元素

    我正在尝试使用contains带有 this 关键字 但它给出了错误 JS function var check ul find li filter function return this contains two css color r
  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简
  • 如何从 Cloud Functions for Firebase 文件夹读取证书文件

    我正在尝试读取 certs 文件夹下的文件 如下所示 functions certs idp public cert perm 这是我用来读取文件的代码 fs readFileSync path join dirname certs idp

随机推荐

  • Webdriver:java.net.BindException:地址已在使用中:连接

    运行 webdriver 时 运行 3 分钟后 出现以下异常并且 Webdriver 崩溃 我仅使用一个 Webdriver 实例和一个 FirefoxDriver 配置文件 Exception in thread main org ope
  • 如何使用C#提交http表单

    我有一个简单的 html 文件 例如
  • PostgreSQL 视图:在另一个计算字段中引用一个计算字段

    我有同样的问题 1895500 但使用的是 PostgreSQL 而不是 MySQL 如何定义具有计算字段的视图 例如 mytable col1 2 AS times two 并创建另一个基于第一个计算字段的计算字段 times two 2
  • _imp 和 __imp 有什么区别?

    当我在 Qt Creator 中工作时尝试使用 MinGW 链接到 MSVC 编译的库时 遇到了一个有趣的错误 链接器抱怨缺少一个符号 就像 imp FunctionName 当我意识到这是由于缺少 extern C 并修复它时 我还使用
  • 为 MySQL 选择数据类型?

    我已经研究和阅读有关 SQL 数据类型几天了 我知道 我知道 这不是很长 对我来说很难掌握的事情之一是如何为 SQL 数据类型选择最佳的数据类型可扩展性 效率和易于访问 我认为如何选择基本数据类型 即 int 与 varchar 非常简单
  • 设置表格行高

    我缺乏 CSS 技能 这让我很头疼 如下图所示 从 firebug 捕获 使用名为 Vaadin 的类似 GWT 的框架 我为 Table 组件指定了类名m2m 模态表我想为该表中的四行设置一个最小高度 但是 我似乎无法让它工作 正如您从图
  • JavaScript:深度比较

    我正在检查这个问题JavaScript 深度比较提问者的解决方案并没有说服我 所以我尝试分析问题并提出了这个 var obj here 2 console log deepEqual obj obj true console log dee
  • React Native 不从 android 中的 SD 卡加载图像

    在 React 本机图像组件中从相机拍照后 我尝试从外部 SD 卡加载图像 如下所示 但它没有在 Android 中渲染 我什至检查了该位置是否缺少图像 但这不是问题 但在 iOS 上 它可以很好地在从相机拍照后从位置加载图像
  • 点对点如何通过路由器工作?

    一台电脑如何通过互联网连接到另一台电脑 例如 程序侦听 PC 1 上的连接 PC 1 位于路由器 1 后面 PC 2 有一个客户端程序尝试连接到 PC 1 在这种情况下 用作听力程序的正确技术 技巧是什么 This 布莱恩 福特的文章解释跨
  • 使用.htaccess,阻止用户访问资源目录,但允许源代码访问资源

    如果我的问题不清楚 我很抱歉 但我不太懂这些行话 我所说的 资源目录 是指我的 css php 脚本 图像 javascript 等 我在图像目录中使用了一个 htaccess 文件 其中包含 deny from all 去做这个 尽管这阻
  • 不安全的代码无法在 Visual Studio 2015 上编译

    我正在尝试在新的 DNX4 6 核心上编译程序 但由于以下原因无法编译 error CS0227 Unsafe code may only appear if compiling with unsafe 这是我的代码 CompilerGen
  • 无法在 Jersey 2.0 中为 Jackson 启用基于 POJO 的 JSON 绑定支持

    我使用 Jersey 生成 JSON 通过 Jackson 进行 POJO 映射 和 Jetty 从 main 方法开始 它非常适合 Jersey 1 x ServletHolder sh new ServletHolder Servlet
  • 仅按可见系列过滤 Highcharts 的图例

    我们正在使用 Highcharts 并有一些复杂的图表 图表上大约有 75 个系列 该系列并未在整个图表中使用 而仅在三个月范围内使用 因此 我们每年大约有 15 个系列 整个图表涵盖五年 大约 15 5 75 个系列 但是 Highcha
  • 在 dart 中将 HTML 字符串解析为 DOM

    In dart 我想解析一个字符串 到 DOM 以便我可以操作生成的 DOM 中的元素 我知道在 JQuery 中 有 parseHTML 来处理它 但我在 dart 中找不到类似的东西 谢谢 我尝试过html2lib 但输出Documen
  • 如何在 PHP 中使用正则表达式获取每个单词的首字母

    我有一个字符串变量 我想获取它的每个单词的第一个字母 我希望最终结果是第一个字母的数组 language Sample Language preg match b a z i language match print r match 我得到
  • 在php中获取上传的文件大小(以字节为单位)

    我正在上传一个图像文件 我想仅使用 PHP 每次获取该图像的大小 以字节为单位 到目前为止我已经做到了 name FILES image name if name null tmpDest FILES image tmp name size
  • 如何在 Java 中比较字符串和字符数组?

    在我的程序中 我试图比较我的字符数组asterixA 到一个字符串word在 if 条件下 例如 if word equals asterixA 但这给了我一个错误 还有其他方法可以比较它们吗 您必须将字符数组转换为字符串或字符串转换为字符
  • 当文件拖放到我的表单上时,为什么我的表单没有收到 WM_DropFiles?

    我正在使用 Embarcadero RAD Studio XE 来开发应用程序 我正在尝试使用以下代码将文件拖放到应用程序中 TMainForm class TForm public procedure WMDropFiles var Ms
  • MVC3 客户端验证不起作用

    我的模型上有一个必需的注释 Required ErrorMessage Please choose an option public bool AnyDebts get set 我在 web config 中启用了客户端验证
  • 在带有淘汰赛的选择中更改事件

    我有一个问题 如何调用 onchanges 敲 js 到我的选择选项 我已经有一个函数和 html 但是当我选择选择选项时 没有任何变化