0

I have this select and it has a change event bound to it. On the change of the value inside it, I want to select a particular element in another select list i.e. a particular option in that.

However it doesn't work. There are some services in Main services upon whose selection the subservice is not required hence the default -select- should be selected.

$("#MainServices").change(function() {
  $(#SubServices).val("-Select-")
}
<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
  <option selected value="m-None">-Select-</option>
  <option value="m-SS">Software Services</option>
  <option value="m-AIMS">Asset Integrity Management Services</option>
  <option value="m-HSE">HSE & Environmental Services</option>
  <option value="m-ES">Engineering Services</option>
</select>

<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">
  <option class="" selected value="s-None">-Select-</option>
  <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
  <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
  <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
  <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
</select>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Johnny Shallow
  • 101
  • 1
  • 3
  • 12
  • There's some syntax issues in your JS; missing quotes and a closing `)`. Also note you set the *value* of the option, not it's *text*, so `val("-Select-")` needs to be `val("s-None")` – Rory McCrossan Mar 21 '19 at 09:10
  • F12 Helps **a lot** when debugging JS. You **should** (must?) use it. – Cid Mar 21 '19 at 09:14

1 Answers1

0

-Select- is the text of that option, the value is s-None, so it should be

$("#MainServices").change(function() {
  $("#SubServices").val("s-None")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
  <option selected value="m-None">-Select-</option>
  <option value="m-SS">Software Services</option>
  <option value="m-AIMS">Asset Integrity Management Services</option>
  <option value="m-HSE">HSE & Environmental Services</option>
  <option value="m-ES">Engineering Services</option>
</select>

<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">

  <option class="" selected value="s-None">-Select-</option>
  <option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
  <option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
  <option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
  <option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
</select>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • I'm not sure. Depending on what the data is. I would use jquery and load the values into the second dropdown dynamically. – JamesS Mar 21 '19 at 10:29
  • That's very common, and there are many questions here about cascading selects where you can see how to do it. – Barmar Mar 21 '19 at 14:14