selectedIndex改变后触发onChange事件？

发布于 2024-09-30 07:14:43 字数 1010 浏览 10 评论 0原文

当使用 jQuery 设置 selectedIndex 或 val 时，是否可以在选择字段上触发更改事件？

我已经尝试过，但似乎不起作用。我正在尝试用我自己的设计之一替换选择字段。问题是，如果我将更改事件附加到选择字段，则当索引更改时，它需要触发该事件。

有办法做到这一点吗？

var a = $("a");

$("a").on("click", function() {
  
  $("#selectList")[0].selectedIndex = a.index($(this));
  
    //now fire event

	return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Trigger 1</a>
<a href="#">Trigger 2</a>
<a href="#">Trigger 3</a>

<select id="selectList">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

编辑： @xSaint32 通过使用 jQuery 的触发器方法回答了这个问题。

原文

Is it possible to trigger a change event on a select field when the selectedIndex or val is set with jQuery?

I've tried it and it doesn't seem to work. I'm attempting to replace a select field with one of my own design. The issue is if i attached a change event to a select field, when the index is changed it needs to fire that event.

Is there a way to do this?

var a = $("a");

$("a").on("click", function() {
  
  $("#selectList")[0].selectedIndex = a.index($(this));
  
    //now fire event

	return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Trigger 1</a>
<a href="#">Trigger 2</a>
<a href="#">Trigger 3</a>

<select id="selectList">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

EDIT: @xSaint32 answered this, by using jQuery's trigger method.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只等公子 2024-10-07 07:14:43

@xSaint32 通过使用 jQuery 的触发器方法回答了这个问题。

var a = $("a"),
    select = $("#selectList");

$("a").on("click", function() {
  
  select[0].selectedIndex = a.index($(this));
  
  select.trigger( "change" );

  return false;
});

select.on("change", function() {
  
  alert("My index changed");

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Trigger 1</a>
<a href="#">Trigger 2</a>
<a href="#">Trigger 3</a>

<select id="selectList">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

@xSaint32 answered this, by using jQuery's trigger method.

var a = $("a"),
    select = $("#selectList");

$("a").on("click", function() {
  
  select[0].selectedIndex = a.index($(this));
  
  select.trigger( "change" );

  return false;
});

select.on("change", function() {
  
  alert("My index changed");

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Trigger 1</a>
<a href="#">Trigger 2</a>
<a href="#">Trigger 3</a>

<select id="selectList">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

回复收藏 0 原文

~没有更多了~