天道酬勤,学无止境

将 onchange 绑定到下拉列表(Binding onchange to dropdown)

问题

我在将onchange绑定到select时有点困惑。 我可以看到有多种方法可以做到这一点。

html

<select id="ddl" onchange="test()"></select>

查询

$(function(){

    $("#ddl").change(function(){
               return test();
           });

});

或者

 $(function(){

    $("#ddl").bind("change", function(){
               return test();
           });

});

这3种方法中

  1. 哪一个被认为是标准做法?
  2. 这些方法有什么优点吗?
回答1

您也可以使用.on

$('SELECT').on('change',function(){
   // code
});

在 jQuery 1.7 之前, change()只是bind("change")的捷径。

然而, on() 1.7 开始, on()已经取代了bind("change")so change()是一个快捷方式。

因此,最好的方法是要么;

$("SELECT").bind("change", function(e) {});
$("SELECT").on("change", function(e) {});

我更喜欢第二个选项,因为它也可以自动应用于动态生成的DOM

回答2

所有提到的 jquery 方法似乎都是平等的,我建议使用 .change() 使您的代码更易于阅读。

我经历过 html onchange="" 被 jquery 绑定事件重写,但多次调用 jquery .change() 将链接处理程序,这通常是需要的行为。

为了使代码干净,我只在简单的程序中使用 html onchange 属性,我知道这些程序不会有多个事件处理程序,而且里面的代码非常简单(通常只有一个函数)。

回答3

与其每次都重新绑定<select> ,不如交换它的内容( <option>元素的列表)。

所以像你一样使用它:

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

但是当你更新它时,只需换出它的内容(其中 newSelectElement 是新的<select>元素):

function updateItemsPerPage( newSelectElement ) {
    $("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}
标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • ngModel 绑定聚合物下拉菜单 (Angular2)(ngModel Binding on Polymer dropdown (Angular2))
    问题 好的,到目前为止,我成功地将<paper-radio> 、 <paper-checkbox>与 ngModel 绑定在一起,方法是为它们中的每一个使用自定义ControlValueAccessor 。 现在我被困在<paper-dropdown-menu>这里的场景,我可以捕获 paper-dropdown (iron-select) 但不能绑定 -two-way,即,使用下面的 ngModel 是 HTML 和自定义访问器类 我的表单.html <paper-dropdown-menu [(ngModel)]="mymodel.selection" label="Your Fix"> <paper-menu class="dropdown-content"> <paper-item value="1" ngDefaultControl>Coffee</paper-item> <paper-item value="2" ngDefaultControl>Cigarettes</paper-item> <paper-item value="3" ngDefaultControl>Chivas</paper-item></paper-menu> </paper-dropdown-menu> 和我的自定义访问器类 /** * Created by pratik on 12/5/16
  • 将Angle 2模型绑定到聚合物下拉列表(Bind angular 2 model to polymer dropdown)
    问题 我决定这个周末花一些时间看一下Angular 2和Polymer。 我对angular 2真的很感兴趣,并且很想开始用它来构建一些东西。 现在从Angular 2开始的一个缺点是还没有好的组件库。 但是,由于Angular 2声称它可以与Web组件一起很好地工作,所以我想尝试一下Polymer。 我已经成功地将数据绑定到简单的组件,例如输入字段。 我目前停留的是如何将模型绑定到纸张下拉菜单的所选对象。 由于我对这两者都非常陌生,所以我真的不知道该怎么做,但这是我到目前为止一直在尝试的方法。 有没有人完成将Angle 2模型绑定到聚合物下拉菜单的工作? <paper-dropdown-menu > <paper-menu class="dropdown-content" valueattr="id" [(ng-model)]="model"> <paper-item *ng-for="#m of options" id="{{m.id}}" (click)="onClick()">{{m.name}}</paper-item> </paper-menu> </paper-dropdown-menu> 编辑:我现在已经创建了一个ValueAccessor,它似乎可以接受,但有一个例外。 我试图通过在writeValue方法中设置selected属性来使下拉列表具有预选值。 起初
  • 带有选择下拉列表的 Blazor onchange 事件(Blazor onchange event with select dropdown)
    问题 所以我一直试图在选择下拉值更改时触发一个简单的 onchange 。 像这样: <select class="form-control d-flex" onchange="(dostuff())"> @foreach (var template in templatestate.templates) { <option value=@template.Name>@template.Name</option> } </select> 调用方法: void dostuff() { Console.WriteLine("first spot is firing"); _template = templatestate.templates.FirstOrDefault(x => x.Name == _template.Name); Console.WriteLine("second spot is firing"); } 无论我如何尝试重新定向,我得到的结果都是浏览器中的这个错误。 Uncaught Error: System.ArgumentException: There is no event handler with ID 0 有什么明显和关键的东西我遗漏了吗? 因为我有一个按钮 onclick 事件可以在同一页面中正常工作。 回答1 您的答案应该在 cshtml 中:
  • 如何在语义反应下拉列表中使用 onChange 方法(How to use onChange method in semantic react dropdown)
    问题 有人可以帮助我了解如何在下拉菜单中使用 onChange (Semantic UI React)。 我正在阅读文档,但仍然不明白。 它确实有 onChange 道具。 onChange(event: SyntheticEvent, data: object) 我如何使用它? 就像,我有方法dropdownmethod() 。 编辑 - 实施了建议,但没有奏效。 我认为在您的建议中,您没有绑定该功能。 但是,我绑定了函数。 onChangeFollower(event,data){ console.log("on change follower",data.text) } render() { console.log("this.props",this.props) var onChangeFollower = this.onChangeFollower.bind(this) return ( <div> <h2>project settings are here</h2> <h2>Add new Member</h2> <Dropdown onChange={onChangeFollower} placeholder='Select Member' fluid search selection options={arr} /> <h2>List of members</h2>
  • 静态下拉到动态下拉 Coldfusion(Static Dropdown to Dynamic Dropdown Coldfusion)
    问题 我是新来的堆栈溢出。 我需要创建一个静态下拉列表,然后根据在静态下拉列表中选择的值创建一个动态下拉列表。 只是coldfusion 和html。 没有其他花哨的东西。 因此,从第一个下拉菜单中,用户将选择:颜色、身份证、官员、学校并点击“继续”按钮 然后在同一页面或不同页面上,如果选择了颜色,它将对数据库进行查询并给出不同颜色的结果,如果 id 被选择,它将给出查询中的 id 编号列表。 如果选择了这些变量,对于军官或学校也是如此。 我可以做下拉框,并得到查询,但我坚持从第一个下拉框到查询的结果。 下面是我的代码: <cfform method="POST" action=""> <select name="dropDownOne" required="yes" onchange="this.form.submit()"> <option>Select Report Type</option> <option value="color">Color</option> <option value="id">ID</option> <option value="officier">officier</option> <option value="school">school</option> </select> <input type="Submit" name=
  • 如何在 MVC 中的下拉列表更改时调用操作名称?(How to call a Action Name on dropdown change in MVC?)
    问题 如何在选择第一个下拉列表时将数据绑定到第二个下拉列表? 我使用强类型视图绑定了第一个下拉列表。 现在如何调用操作名称并在选择第一个下拉列表上绑定第二个下拉列表? <tr> <td>Select Make:</td> <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList, new { @class = "form-control", @onchange = "FillModel()" })</td> </tr> <tr> <td>Select Model</td> <td>@Html.DropDownListFor(m => m.SelectedMake, Model.MakesList)</td> </tr> 动作名称 public ActionResult FillModel(int MakeId) { var makedata = objVehicleContext.VehicleMakes.Where(m=>m.MakeId==MakeId); ViewBag.makelist = makedata.ToList(); return View(); } 回答1 您可以将 Jquery 函数放在下拉列表的更改上。 例如 <tr> <td>Select Make:</td> <td>@Html
  • 使用 jQuery 应用 css 停止从显示下拉列表(Applying css with jQuery stops <select> from showing drop down list)
    问题 所以我有一些<select>标签,我想在 IE 中显示全部内容。 我环顾四周并找到了一些修复程序,但我不想包含 YUI,因为我已经在其他地方使用了 jQuery,并且希望将选择保留在页面上,而不是用 DIV 替换它。 在我提出的代码中,FF3 效果很好。 在 Internet Explorer (6,7,8) 中,第一次单击<select>会闪烁下拉菜单,然后它就会消失。 我已经尝试使用focus和mousedown代替代码中的click事件,但没有成功。 如果我在autoWidth中删除element.css两个设置,下拉菜单会按预期工作,而不会带来宽度autoWidth的好处。 有谁知道什么会导致css的设置使IE中的下拉失败? <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> var count = 0; autoWidth = function(e) { $element = $(e.target) $element.css("width","auto"); if($element.width() < $element.data(
  • Bootstrap 多选下拉列表 .val() 未更新(Bootstrap multiselect dropdown .val() not updating)
    问题 我有 3 个级联的下拉菜单。 区域 --> 区域 --> 领土 我正在使用 Bootstrap 多选下拉菜单。 当我选择区域下拉列表时,将绑定相应的区域,同时将新绑定的区域的领土绑定到区域下拉列表。 这是我的下拉初始化代码。 $('#ddlZone').multiselect({ enableClickableOptGroups: true, enableCollapsibleOptGroups: true, enableFiltering: true, includeSelectAllOption: true, nonSelectedText: 'Select Zone', enableCaseInsensitiveFiltering: true, selectAllNumber: true, onChange: function(option, checked,select) { FillRegionsDropdown(); FillTerritoriesDropdown(); } 下面是上述函数的代码。 function FillRegionsDropdown() { var Zone=$('#ddlZone').val(); if(Zone != null) { Zone= Zone.join(","); $.ajax({ type: "POST"
  • 语义 UI 动态下拉菜单(Semantic-UI Dynamic Dropdown)
    问题 语义 UI 下拉菜单有问题。 我一直在使用 Semantic-Ui,并想动态更改下拉项。 也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项目将会改变。 但问题是,当项目改变时,不能选择第二个下拉菜单,值不会改变。 下拉菜单不会折叠回来。 HTML 第一个下拉菜单 <div id="programmetype" class="ui fluid selection dropdown"> <input type="hidden" name="programmetype"> <div class="text">Choose..</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-value="val1">Car</div> <div class="item" data-value="val2">Tank</div> <div class="item" data-value="val3">Plane</div> </div> </div> 第二个下拉菜单 <div id="servicetype" class="ui fluid selection dropdown"> <input type="hidden" name="servicetype"> <div class
  • 在没有模型绑定的情况下响应角度的下拉选择更改(Responding to drop down selection change in angular without model binding)
    问题 我有一个下拉菜单,应该会导致在更改时获取数据。 我不需要两种方式绑定到下拉模型的模型。 我只希望它最初填充一个部门列表,当用户选择一个时,它会获取该部门的用户列表。 选择看起来像这样: <select class="form-control" id="selDepartmentList" ng-model="departmentList" ng-change="getUsersInDepartment(document.getElementById("selDepartmentList").options[document.getElementById("selDepartmentList").selectedIndex].value)"> <option value="-1">All</option> <option ng-repeat="dept in departmentList" value="{{dept.DepartmentId}}"> {{dept.DepartmentName}} </option> </select> 我尝试了没有 ng-model 的 ng-change,但它失败了,因为 ng-change 出于某种原因需要 ng-model。 我尝试将 ng-model 设置为 null 和空字符串,但都没有奏效。 我也尝试过完全不使用 ng
  • WPF ComboBox 绑定未正确更新(WPF ComboBox Binding not updating properly)
    问题 我的 ComboBox 中的 Binding 存在更新问题。 我创建了一个简化的例子来说明这个问题。 我将粘贴下面的所有相关代码。 所以在上图中,我有一个 TextBlock(黑色),显示 SelectedPerson 的“SelectedPerson.FullName”属性。 SelectedPerson 的 FirstName 和 LastName 属性显示在 FullName 下方的 2 个文本框中。 ComboBox DisplayMemberPath 绑定到“FullName”,并且组合框包含一个 Person 对象列表。 TextBlock、ComboBox 和 ComboBox 下拉列表中的“FullName”属性应该相同。 但是,它仅在 TextBlock 中正确更新。 组合框下拉菜单仅在第一次打开时更新,之后不会更新。 因此,如果我在文本框中编辑 FirstName 并单击下拉列表,然后对其进行更多编辑并再次单击下拉列表,我们最终会为 SelectedPerson 显示 3 个不同的“全名”值。 我在后面的代码中使用 INotifyPropertyChanged 来通知“SelectedPerson”何时更改。 这似乎可以很好地更新 TextBlock,但由于某种原因,ComboBox 没有使用新的“FullName”进行更新。 当我发送
  • 语义 UI 下拉更改处理程序(Semantic UI dropdown change handler)
    问题 我有以下使用语义 UI 的下拉列表: <div class="ui selection dropdown select-language"> <input name="language" type="hidden" value="fr-FR"> <div class="text">French</div> <i class="dropdown icon"></i> <div class="menu ui transition hidden"> <div class="item" data-value="en-US">English</div> <div class="item active" data-value="fr-FR">French</div> </div> </div> 在 jQuery 端我初始化它: $(".select-language").dropdown() 如何添加change处理程序? 我在文档中找到的唯一与此相关的是: onChange(值,文本) 上下文:下拉在选择下拉项后调用。 接收选择的名称和值。 这对我来说听起来有点混乱。 我怎样才能使用它? JSFIDDLE 回答1 实际上,绑定事件有以下三种方式: // globally inherited on init $.fn.dropdown.onChange = function(){...}
  • Codeigniter 中某些选中复选框的具有 form_dropdown 的多个函数(Multiple functions with form_dropdown for some checked checkboxes in Codeigniter)
    问题 我想在 Codeigniter 中使用 form_dropdown 将一些函数应用于多个选中的复选框。 我想要删除、激活和停用某些选定数据的功能。 如何在 Codeigniter 中编写此代码。 有人可以帮助我吗?! 回答1 您可以定义一些 JavaScript 函数,然后将它们附加到每个下拉列表中。 这不是确切的代码,http://codeigniter.com/forums/viewthread/165476/#792072 但它说明了如何将第四个参数传递给 form_dropdown,这将让您添加一个可以执行函数的 onChange 属性. form_dropdown('field_name', $options, $selected, 'onchange="doSomething(this)"'); 或者,您可以使用 JavaScript 将操作绑定到加载时的下拉列表。 无论哪种方式,您都应该能够以这种方式为每个下拉菜单提供不同的操作。
  • 下拉列表 SelectedIndex 不适用于 javascript 中的 getElementById(DropDown List SelectedIndex is not working with getElementById in javascript)
    问题 我有一个名为批次的下拉列表。 如果我选择了第二个选项,OnChange 函数内的 dropdown.selectedIndex 始终显示所选索引。 但是 document.getElementById("batches").selectedIndex 总是显示第一个索引。 为什么是这样? 实际上我想在另一个函数中读取正确的 selectedIndex 批次,这就是为什么我需要一种方法来以两种方式获得正确的选定索引。 function OnChange(dropdown){ var myindex = dropdown.selectedIndex;// This prints correctly alert("Index : "+document.getElementById("batches").selectedIndex);// This is always 0 no metter what selects } <select name='batches' id='batches' onchange='OnChange(this);'> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> </select> 回答1 因为你调用函数
  • 在 MVC 中对下拉列表选择调用特定操作(Invoking particular action on dropdown list selection in MVC)
    问题 我在 MVC 视图中有一个下拉列表。 在选择更改下拉列表时,我想在控制器中调用特定的操作方法。 我所做的是这样的: <%=Html.DropDownList("ddl", ViewData["AvailableList"] as SelectList, new { onchange = "this.form.action='MyMethod';this.form.submit();" })%> 一切都在编译。 但是当我更改下拉选择时会引发运行时异常,如 “Microsift JScript 运行时错误:对象不支持属性或方法” 如何重定向到列表选择更改事件的特定操作? 如何将参数传递给此操作方法? 回答1 你的方法应该有效。 您遇到的问题是您在onchange事件中使用this是无效的。 尝试用这样的东西替换你的this.form引用: <%= Html.DropDownList( "ddl", ViewData["AvailableList"] as SelectList, new { onchange = @" var form = document.forms[0]; form.action='MyMethod'; form.submit();" } ) %> 回答2 你真的需要提交表格吗? 你可以重定向: onchange = "redirect(this.value)
  • 是否可以将多个参数传递给 Ember Power Select 中的 onChange 操作?(Is it possible to pass multiple arguments to onChange action in Ember Power Select?)
    问题 我目前正在使用优秀的 ember-power-select 插件作为 ember-bootstrap 表单的一部分。 我在表单上有多个下拉项,我试图将它们的处理方式统一到一个函数中,该函数可用作 power-select 调用中的onChange操作: {{#form.element controlType="power-select" label="Destination" value=destinationSelection options=destinationOptions as |el|}} {{#el.control onChange=(action "setDropDown") searchField="name" as |item|}} {{item.name}} {{/el.control}} {{/form.element}} 我的处理程序函数将根据下拉列表的选择简单地设置一些值: actions: { setDropDown(selected, string) { handleDropDown(selected, dropdown, this) } } function handleDropDown(selected, dropdown, controller) { let selection = `${dropdown}Selection` let
  • 在选择下拉列表中发生onchange时如何自动提交Rails formhelper(从数据库填充)(How to auto-submit Rails formhelper, when onchange occurs on select dropdown (populated from DB))
    问题 我的视图中有一个带有两个下拉列表的表单,这两个下拉列表都是从db表填充的,当两个下拉列表中发生onchange事件时,我都想在其中自动提交表单: <%= form_for @products, url: products_path, method: :get do |f| %> <!-- POPULATE DROPDOWNS FROM DB DATA --> <%= select('post', 'state', @suppliers.collect {|s| [s.supp_state, s.id]}) %> <%= select('post', 'category_id', @categories.collect {|c| [c.cat_name, c.id]}) %> <div class='actions inline'><%= f.submit 'GO!' %></div> <% end %> 我尝试了以下方法的变体,但是我在Ruby / Rails / JS中是一个新手。 <%= select('post', 'state', @suppliers.collect {|s| [s.supp_state, s.id]}, :onchange => "this.form.submit()") %> <%= select('post', 'state',
  • 如何使 ajax 下拉列表与 ASP.Net MVC 5 中的 ViewModel 强绑定(How to make an ajax dropdown strongly bound to the ViewModel in ASP.Net MVC 5)
    问题 所以,我有一份工作申请的推荐表。 现在,当求职者从公司下拉列表中选择一家公司时,我想显示该公司的求职信下拉列表(求职者已从另一个选项卡上传求职信)。 现在为了获得 Microsoft 的推荐,一个人可能有 3 封求职信。 问题: 我想知道如何显示来自 ajax 调用的下拉列表,并仍然保持与 Model 强绑定的coverletter 下拉列表。 以下是非 AJAX强绑定:显示所有求职信,无论选择哪家公司) 看法: @model Bridge.ViewModels.ReferralViewModel @using (Html.BeginForm()) { <div class="form-group"> @Html.LabelFor(model => model.CompanyId, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(m => m.CompanyId, Model.Companies, new { @class = "form-control js-change", onchange = "companyChanged()" }) </div> </div> <div class="form-group"
  • 下拉列表 Onchange 显示其他下拉列表(Dropdownlist Onchange Show other Dropdownlist)
    问题 我的问题是我想用 javascript 创建一个类别选择系统,但是当我选择一个选项时,它会显示所有 div; 它应该只显示一个 div。 例如: if value = emlak然后show div id=emlak JS function getData(dropdown) { var value = dropdown.options[dropdown.selectedIndex].value; if (value = 'emlak'){ document.getElementById("emlak").style.display = "block"; } if(value = 'vasita'){ document.getElementById("vasita").style.display = "block"; } } HTML <select name="kategori" onChange="getData(this);"> <option value="hat" onClick="">Hat</option> <option value="emlak">Shirt</option> <option value="vasita">Pants</option> </select> <select id="emlak" name="currentList"
  • 如何在react js的下拉列表中设置值?(how to set value in dropdown in react js?)
    问题 你能告诉我如何在 react js 的下拉列表中设置值吗? 几秒钟后我得到下拉数据 3000 然后我需要设置下拉值 const App = ({ children }) => { const val = "ax"; const [state, setState] = useState([]); setTimeout(() => { setState(countryOptions); }, 2000); return ( <Container style={{ margin: 20 }}> <Example countryOptions={state} /> </Container> ); }; https://codesandbox.io/s/semantic-ui-example-utev4 应选择预期输出奥兰群岛。 { key: "ax", value: "ax", text: "Aland Islands" }, 三秒后我想选择这个元素 const val = "ax"; 回答1 正如斯塔夫罗斯的回答所建议的那样; 最好在 App 组件中保持状态并将 setVal 传递给下拉列表: 应用程序: const App = ({ children }) => { const [state, setState] = useState([]); //added val and