如何获取每行动态Select的选项值？控制器代码实现咨询

Hey there! Let's figure out how to capture those dynamic select values in your controller. Since your selects are generated per customer row and linked to the changeStatus(value, {{customer.lsl_sys_id}}) function, here are practical approaches based on common development setups:

Vanilla JavaScript Approach #

If you're working with plain JavaScript, you can leverage custom data attributes to tie each select to its customer, and access the value either directly on change or later when needed:

Dynamic Row Template #

<!-- Add a data attribute to link the select to the customer's ID -->
<select 
  onchange="changeStatus(this.value, '{{customer.lsl_sys_id}}')" 
  data-customer-id="{{customer.lsl_sys_id}}"
>
  <option value="active">Active</option>
  <option value="inactive">Inactive</option>
  <!-- Add other status options as needed -->
</select>

Controller/Script Code #

// Your changeStatus function already receives the selected value as the first parameter!
function changeStatus(statusValue, customerId) {
  // Use the value immediately for updates, logging, etc.
  console.log(`Customer ${customerId} status updated to: ${statusValue}`);

  // If you need to fetch the current status later (outside the change event):
  const customerSelect = document.querySelector(`select[data-customer-id="${customerId}"]`);
  const currentStatus = customerSelect?.value;
  console.log(`Current status for customer ${customerId}: ${currentStatus}`);
}

Angular (AngularJS) Approach #

For AngularJS, bind the select to a property on your customer object using ng-model—this keeps your data and UI in sync automatically:

Dynamic Row Template #

<div ng-repeat="customer in customers">
  <select 
    ng-model="customer.status" 
    ng-change="changeStatus(customer.status, customer.lsl_sys_id)"
  >
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
</div>

Controller Code #

app.controller('CustomerController', function($scope) {
  $scope.customers = []; // Populate this with your customer data

  $scope.changeStatus = function(statusValue, customerId) {
    // Access the value directly, or pull it from the customer object
    const targetCustomer = $scope.customers.find(c => c.lsl_sys_id === customerId);
    console.log(`Customer ${customerId} status: ${targetCustomer.status}`);
  };

  // Helper function to get a customer's status anytime
  $scope.getCustomerStatus = function(customerId) {
    const customer = $scope.customers.find(c => c.lsl_sys_id === customerId);
    return customer?.status;
  };
});

Vue.js Approach #

In Vue, use v-model to bind the select to a status property on each customer in your array. This makes accessing the value straightforward:

Dynamic Row Template #

<div v-for="customer in customers" :key="customer.lsl_sys_id">
  <select 
    v-model="customer.status" 
    @change="changeStatus(customer.status, customer.lsl_sys_id)"
  >
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
</div>

Component Code #

export default {
  data() {
    return {
      customers: [] // Your customer dataset
    };
  },
  methods: {
    changeStatus(statusValue, customerId) {
      // The value is available via the parameter or the customer object
      const targetCustomer = this.customers.find(c => c.lsl_sys_id === customerId);
      console.log(`Customer ${customerId} status updated to: ${targetCustomer.status}`);
    },
    // Get status for a specific customer later
    getCustomerStatus(customerId) {
      const customer = this.customers.find(c => c.lsl_sys_id === customerId);
      return customer?.status;
    }
  }
};

Core Takeaway #

The simplest path is using the value parameter passed directly to changeStatus when the select is updated. For frameworks like Angular or Vue, binding the select to a data property on your customer object ensures you always have access to the current status without extra DOM queries.

内容的提问来源于stack exchange，提问作者Sahil