JQuery技术问询：如何将多选Select的自定义属性值与选项值以逗号分隔发送

Got it, let's solve this problem for you. Here's a straightforward implementation using jQuery to collect the selected options' values and their subject_country_id custom attributes, then send them as comma-separated strings:

Step-by-Step Implementation #

1. Core Logic Overview #

We'll bind an event (like a button click or form submit), collect the required data from selected options, format it into comma-separated strings, then send the request via AJAX.

2. Full Code Example #

// Assume you have a submit button with ID "submit-btn"
$('#submit-btn').click(function(e) {
    e.preventDefault(); // Prevent default form submission if needed
    
    // Get all selected options from the dropdown
    const selectedItems = $('#jform_subject_type_id option:selected');
    
    // Initialize arrays to store values and country IDs
    const selectedValues = [];
    const selectedCountryIds = [];
    
    // Loop through each selected option to collect data
    selectedItems.each(function() {
        const $option = $(this);
        selectedValues.push($option.val());
        selectedCountryIds.push($option.attr('subject_country_id'));
    });
    
    // Convert arrays to comma-separated strings
    const valuesStr = selectedValues.join(',');
    const countryIdsStr = selectedCountryIds.join(',');
    
    // Send the data via AJAX
    $.ajax({
        url: '/your-target-endpoint', // Replace with your actual API/endpoint URL
        method: 'POST',
        data: {
            subject_type_ids: valuesStr,
            subject_country_ids: countryIdsStr
        },
        success: function(response) {
            console.log('Request successful:', response);
            // Add your success handling here (e.g., show a success message)
        },
        error: function(xhr, status, err) {
            console.error('Request failed:', err);
            // Add your error handling here (e.g., show an error message)
        }
    });
});

3. Key Details Explained #

• Selecting Selected Options: $('#jform_subject_type_id option:selected') targets only the options that are checked in the multi-select dropdown.
• Collecting Data: We use .each() to iterate over each selected option, pushing its value and subject_country_id attribute into separate arrays.
• Formatting Strings: .join(',') converts the arrays into comma-separated strings, which is the format you need for sending.
• AJAX Request: We send the formatted strings as parameters to your backend endpoint. Adjust the url, method, and parameter names to match your backend requirements.

4. Alternative: Listening to Form Submit #

If your dropdown is inside a form, you can bind to the form's submit event instead:

$('#your-form-id').submit(function(e) {
    e.preventDefault();
    
    // Same data collection logic as above...
    
    // Send AJAX request
});

Note on Custom Attributes #

While your current subject_country_id attribute works, for better HTML compliance, consider using data-* attributes (e.g., data-subject-country-id) in the future. To get this value, you'd use $option.data('subject-country-id') instead of attr().

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