3
\$\begingroup\$

I'm don't know much about javascript, but and slowly learning through using other people's code. The below code I'm using is quite repetitive, with the only variance being the ID names. I feel like someone will know (and hopefully show) me how to do this show/hide function better.

$('#C7-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

$('#T7-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

$('#C11-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

$('#T11-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

$('#14X-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

$('#17X-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});
\$\endgroup\$
2
  • 1
    \$\begingroup\$ Are you sure this is correct? It seems strange that all event handlers would toggle the same element(s). Can you add the HTML that belongs to this? \$\endgroup\$
    – RoToRa
    Jun 17, 2021 at 14:42
  • \$\begingroup\$ @RoToRa that is a good point! We won't know until the OP replies/updates the post but my hunch is the HTML is similar to the HTML in the fiddle linked in their other post from the day before just with added class names on the elements with ids like *-Under-Drawer-Bench. \$\endgroup\$ Jun 17, 2021 at 16:40

2 Answers 2

5
\$\begingroup\$

You can change the selector to select all items at once.

First option: select all ids comma separated:

$('#C7-Drawer-Shelf-Combo,#T7-Drawer-Shelf-Combo,#C11-Drawer-Shelf-Combo').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});

Second option (prefered): use a css class. Add a specific css class to all those items, and use this class in the selector:

<select id="#C7-Drawer-Shelf-Combo" class="custom-class">....</select>
<select id="#T7-Drawer-Shelf-Combo" class="custom-class">....</select>
<select id="#C11-Drawer-Shelf-Combo" class="custom-class">....</select>

$('.custom-class').on('change', function () {
   if (this.value) {
   $(".under-drawer-bench").show();
    } else {
   $(".under-drawer-bench").hide();
   }
});
\$\endgroup\$
1
  • \$\begingroup\$ Thank you, I ended up using your first option, with a little edit - I used the ID phrase that @aloisdg wrote "[id$='-Drawer-Shelf-Combo']" to save having to type all IDs out. \$\endgroup\$ Jul 6, 2021 at 0:22
1
\$\begingroup\$

You can target all element ending with [id$='-Drawer-Shelf-Combo']. Use toggle to show/hide.

$("[id$='-Drawer-Shelf-Combo']").on('change', function () {
   $(".under-drawer-bench").toggle();
});

Withtout the HTML/CSS I cant test it though.

\$\endgroup\$
1
  • \$\begingroup\$ Thanks for your comment, I needed to keep it as show/hide instead of toggle as I didn't want it to toggle off in case if the user changes their mind and selects a different dropdown option, but I used your ID phrase as that saved me having to type all the IDs out (see comment on answer). \$\endgroup\$ Jul 6, 2021 at 0:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.