如何使用多选选项值更新 db：Wordpress

Question

我有一个自定义表格，其中包含多个项目并有一列状态。我使用 select 创建了一个下拉菜单来更改状态。

在这里，我想做的是，在更改状态选择选项时，该特定行的状态值应该在数据库中更新。 我可以使用 jquery 获取选择的值，但我不确定如何在同时选择多个下拉列表时更新表格。

我有以下选择，

  <select id ="update-statusDropDown">
  <option name="waiting" value="waiting">Waiting</option>
  <option name="due" value="due">Due Diligence</option>
  <option name="escrow" value="escrow">Escrow</option>
  <option name="inspection" value="inspection">Inspection</option>
  <option name="closed" value="closed">Closed</option>
</select>

我的 jQuery 如下所示，

jQuery(document).ready(function () {

    jQuery('select#update-statusDropDown').change(function () {

        //Selected value
        var inputValue = $(this).val();
        alert("value in js " + inputValue);

        //Ajax for calling php function
        jQuery.post('update-listing-status.php', {dropdownValue: inputValue}, function (data) {
            alert('ajax completed. Response:  ' + data);
            //do after submission operation in DOM
        });
    });
});

我想根据下拉列表中的“inputValue”更新表中的状态值。此外，如果同时选择了多个下拉菜单，我如何一起更新所有值。 请问有人可以帮忙吗？

附上我当前表格的截图

Answer 1

您已经使用该下拉列表的 ID 注册了 select 的更改事件，这意味着只有具有该 ID 的下拉列表才会触发您通过 jquery.post 发出的请求

改为对选择元素使用类属性并在该类上注册更改事件

现在要获取唯一元素，您可以使用该选择元素和选项的数据属性，例如 data-tableid="something"

在这种情况下，您可以注册所有选择元素的所有更改事件，并能够提取仅对给定表或列名称唯一的值。

$('.class-name').on( 'change' , function(){

  // Get the Select itself
  var me = $(this);
  var tableid = me.data('tableid');
  var something = $(this).find(':selected').data('something');

  console.log( tableid );
  console.log( something );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="class-name" data-tableid="table-id">
  <option value="the value" data-something="some value 2">The Title 2 </option>
    <option value="the value" data-something="some value">The Title</option>
</select>

现在，由于您能够唯一地识别正在使用的选择以及正在使用的选项，因此您可以根据需要提出请求。