Setting Dropdown Default Values by Text Content Using jQuery: Methods and Practices

Problem Background and Requirement Analysis

In web development, setting default values for dropdown lists (<select> elements) is a common requirement. Traditional approaches typically locate options via the value attribute, but in certain scenarios, developers need to set the default selection based on the text content of options. This need is particularly prevalent in dynamic forms, internationalization applications, and user interface customization.

Core Solution: The :contains() Selector

jQuery offers the powerful :contains() selector, which matches DOM elements based on their text content. The basic syntax is $("selector:contains('text')"), and this selector returns all elements that contain the specified text.

For the specific application to dropdown lists, the complete code implementation is as follows:

$('select option:contains("it's me")').prop('selected', true);

In-Depth Technical Analysis

Selector Mechanism: The :contains() selector performs substring matching; it will match any option whose text contains the target string. This means if multiple options contain the same text, all matching items will be selected, necessitating uniqueness validation in practical applications.

Comparison of Attribute Setting Methods: Earlier code used the .attr("selected", true) method, but modern jQuery versions recommend using the .prop() method. The key differences are:

• .attr() manipulates HTML attributes
• .prop() manipulates DOM properties
• .prop() offers better compatibility in browsers like Internet Explorer

Extended Application Scenarios

Referencing the auxiliary material, when the default value of a dropdown needs to be dynamically determined based on other form field values, more complex logic can be implemented with conditional checks. For example:

if ($('#numberField').val() < 1) {
    $('select option:contains("shared")').prop('selected', true);
}

Best Practices and Considerations

Exact Text Matching: For exact matching instead of substring matching, combine with the .filter() method:

$('select option').filter(function() {
    return $(this).text() === "exact text";
}).prop('selected', true);

Performance Optimization: In dropdowns with a large number of options, it is advisable to narrow the selection scope first by ID or class before applying the :contains() selector to improve query efficiency.

Compatibility and Error Handling

This method is compatible with all major browsers, including IE8 and above. In actual deployment, it is recommended to incorporate error handling mechanisms to ensure graceful degradation when the target option does not exist.