如何在对话框内的选择框上应用更改事件

Posted 2023-05-09

【中文标题】如何在对话框内的选择框上应用更改事件

【英文标题】：How to apply on change event on a select box inside a dialog

【发布时间】：2018-08-14 16:59:39

【问题描述】：

我写了一些html如下：

<div id = "dialog-1" title = "Dialog Title goes here...">
    <select id= "lang" name= "lang">
        <option value="1"> TEXT </option>
        <option value="2"> HTML </option>
    </select>
</div>

我想打开一个对话框并为选择框应用onChange()事件来对选定的值执行操作。

我打开对话框如下：

$("#dialog-1").dialog(width: 600,height:500);

现在我想在选择框上执行 On change() 事件。我已经尝试过，但它不起作用：

$("#dialog-1").dialog(
    var lang = $("#lang").val();
    alert("lang :: "+lang);
);

【问题讨论】：

如何打开对话框，使用 angularjs 或 jquery？

阅读AngularJS <select> Directive API Reference。 select 指令与ngModel 一起使用以提供范围和<select> 控件之间的数据绑定（包括设置默认值）。它还处理动态 元素，可以使用 ngRepeat 或 ngOptions directives 添加。

在问题中看到所有这些标签有点令人困惑。请说明您是否想使用特定的库/框架/插件（jQuery、Angular 等），或者您想使用纯 javascript 实现相同的目标。

我正在使用 Jquery 打开对话框，在打开对话框后我想处理 Change() 事件以获取选择选项。

【参考方案1】：

您的 jQuery 并没有真正改变。您需要在 <select> 元素上分配一个 .change() 回调。如果您愿意，可以选择更具体。

$(function() 
  $("#dialog-1").dialog(
    width: 600,
    height: 500
  );
  $("#dialog-1 #lang").change(function(e) 
    var lang = $(this).find("option:selected").val();
    console.log("lang :: " + lang);
    $(this).parent().dialog("close");
  );
  $("a[rel='dialog']").button().click(function(e) 
    e.preventDefault();
    $($(this).attr("href")).dialog("open");
  );
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a href="#dialog-1" rel="dialog">Open Language Selection</a>
<div id="dialog-1" title="Select Language">
  <select id="lang" name="lang">
        <option value="1"> TEXT </option>
        <option value="2"> HTML </option>
    </select>
</div>

如您所见，一切都是为了使用正确的选择器和正确的回调函数。

如果元素是动态创建的，则可以使用.on() 函数。

$("#dialog-1").on("change", "select", function());

希望对您有所帮助。

【讨论】：

@AnilKadam 我很高兴它起作用了。您可能想对此帖子进行投票并将其标记为选定的答案。