如何使用多个选择选项值更新数据库：Wordpress

Question

I am having a custom table that has several items and has a column of status. I have created a dropdown using select for changing the status.

Here, what I want to do is, on change of the status select option, the value of status of that particular row should be updated in the db. I am able to get the value of the select using jquery but I am not sure how to update the table when multiple dropdowns are being selected together.

I am having the below select options,

  <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>

My jQuery is something like below,

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
        });
    });
});

I want to update status value in the table as per the 'inputValue' from the dropdown. Also, if multiple dropdowns are selected together, how can I update all the values together. Please can anyone help?

The screenshot of my current table is attached.

Answer 1

You have registered the change event of the select using the ID of that drop down which means only the drop down with that ID will trigger the request you making via the jquery.post

instead use class attribute for the select elements and register the change event on that class

now to get the unique element you can use the data attribute of that select element and option for example data-tableid="something"

in this case you can register all change event of all select elements and be able to extract the values that is only unique to the given table or column name.

$('.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>

So now since you have the ability to uniquely identify which select is being used and which option is being used you can make the request as you wish.

</div>