使用 Jquery 来选择并执行下拉菜单

Question

我在一个网站上工作，该网站有一个使用 select 类别下拉菜单的设备租赁脚本。 http://www.thierryfun.be/indexV2.php

客户希望所有类别都额外显示为按钮。所以我试图点击一个按钮，就好像用户 select 从下拉列表中输入了一个选项。

我试过将一些元素与下拉列表联系起来：

$('.thirdButton').click( function() {
    $("select[name='category_id']").eq(3).prop('selected', true);
    $("select[name='category_id']").prop('selectedIndex', 3);
    $("select[name='category_id']").val(3).change();
    $("option[value=3]").click();
    $("option[value=3]").triggerHandler( "select" );
    $("option[value=3]").trigger( "click" );
});

然而，所有这些陈述并不能完全完成工作。它们都无法充当向服务器发送新请求的实际点击。正如您在这个 30 秒的截屏视频中看到的 https://www.youtube.com/watch?v=mZz8xgc0ALY

下拉列表实际上 "commit"、"execute" 发出服务器请求。

非常感谢任何想法和建议！

Answer 1

.click() 事件的问题是您必须在 .document 是 .ready() 之后声明它，如果控件是在页面加载后动态创建的，它将不起作用。我建议应该更改第一行：

$('.thirdButton').click( function() {
    ....
    ...
    ...
});

到

$(document).on('click','.thirdButton',function(){
    ....
    ...
    ...
});

.on() 无需在 .ready() 内声明即可工作，最好的是，它适用于在 HTML 中编写的控件或动态创建的控件页面已上线。试试这个：

$(document).on('click','.thirdButton',function(){
    $("select[name='category_id']").eq(3).prop('selected', true);
    $("select[name='category_id']").prop('selectedIndex', 3);
    $("select[name='category_id']").val(3).change();
    $("option[value=3]").click();
    $("option[value=3]").triggerHandler( "select" );
    $("option[value=3]").trigger( "click" );

});

Answer 2

这里有一些建议：

您不需要给每个按钮一个唯一的 class。使用它们在按钮组中的相对位置来确定对应的 option 到 select.
$("select[name='category_id']").eq(3).prop('selected', true);意义不大； selected 属性属于 option 元素。
更改 selected option 后，您可以通过 .change() 方法触发 change 事件。
使用 $(...option').eq(2).prop('selected', true') 或 $('select...').prop('selectedIndex', 2)，但不能同时使用。

这是一个演示：

$(function() {
  $('#mybuttons button').on('click', function() {
    var index = $(this).index('#mybuttons button') + 1;
    $('#myselect option').eq( index ).prop('selected', true).parent().change();
  });
  $('#myselect').on('change', function() {
    $('h3 strong').text('YES - ' + this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
  <option value="">select one</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<div id="mybuttons">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<h3>Did Selects Change Event Trigger? <strong></strong></h3>

使用 Jquery 来选择并执行下拉菜单

Using Jquery to get a dropdown selected and executed

jquery

onchange

selected

option