Jquery Question posted in
The official Jquery Api Documentation can be found here.

Have jQuery select item in drop down based on selection in another drop down

Below is a standard two select drop down form menu’s

<select name="ServicePropertySize">
  <option value="">—Please choose an option—</option>
  <option value="Up To 4000 sq ft">Up To 4000 sq ft</option>
  <option value="4000 -> 4500 sq ft">4000 -&gt; 4500 sq ft</option>
  <option value="4500 -> 5000 sq ft">4500 -&gt; 5000 sq ft</option>
</select>

<select name="PackageMowingPricePointWithText">
  <option value="">—Please choose an option—</option>
  <option value="$30.00 - Up To 4000 sq ft">$30.00 - Up To 4000 sq ft</option>
  <option value="$35.00 - 4000 -> 4500 sq ft">$35.00 - 4000 -&gt; 4500 sq ft</option>
  <option value="$40.00 - 4500 -> 5000 sq ft">$40.00 - 4500 -&gt; 5000 sq ft</option>
  <option value="$40.00 - 5000 -> 5500 sq ft">$40.00 - 5000 -&gt; 5500 sq ft</option>
</select>

The code below will select the value in drop down #2 if the value selected "equals" the value selected in drop down #1.

I need the code below modified to select the option in drop down #2 where the value "contains" the value selected from drop down #1

$('select[name="ServicePropertySize"]').change(function() {
    var PropertySizeSelected = $("option:selected", this).val();
    $("select[name='PackageMowingPricePointWithText']").find("option").filter(function(index) {
        return PropertySizeSelected === $(this).text();
    }).prop("selected", "selected");    
})
Tags:

2

Answers


  1. 0 
    $('select[name="ServicePropertySize"]').change(function() {
    var PropertySizeSelected = $("option:selected", this).val();
    $("select[name='PackageMowingPricePointWithText']").find("option").filter(function(index) {
        return $(this).text().includes(PropertySizeSelected);
    }).prop("selected", "selected");    
})
    Login or Signup to reply.
  2. 0 
    $('select[name="ServicePropertySize"]').change(function() {
  // Get the selected value
  var selectedValue = $(this).val();

  // Attempt to find a matching option in the second select
  var matchingOptionValue = $('select[name="PackageMowingPricePointWithText"] option').filter(function() {
    return $(this).text().includes(selectedValue);
  }).val();

  // Check if a matching option was found
  if (matchingOptionValue) {
    // If found, set the matching option as selected
    $('select[name="PackageMowingPricePointWithText"]').val(matchingOptionValue);
  } else {
    // If not found, select the default option (usually the first one)
    $('select[name="PackageMowingPricePointWithText"]').val($('select[name="PackageMowingPricePointWithText"] option:first').val());
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select name="ServicePropertySize">
  <option value="">—Please choose an option—</option>
  <option value="Up To 4000 sq ft">Up To 4000 sq ft</option>
  <option value="4000 -> 4500 sq ft">4000 -&gt; 4500 sq ft</option>
  <option value="4500 -> 5000 sq ft">4500 -&gt; 5000 sq ft</option>
</select>

<select name="PackageMowingPricePointWithText">
  <option value="">—Please choose an option—</option>
  <option value="$30.00 - Up To 4000 sq ft">$30.00 - Up To 4000 sq ft</option>
  <option value="$35.00 - 4000 -> 4500 sq ft">$35.00 - 4000 -&gt; 4500 sq ft</option>
  <option value="$40.00 - 4500 -> 5000 sq ft">$40.00 - 4500 -&gt; 5000 sq ft</option>
  <option value="$40.00 - 5000 -> 5500 sq ft">$40.00 - 5000 -&gt; 5500 sq ft</option>
</select>

    This one will select default value if not found

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search