Help to combine 2 scripts

I have a page where there are a few dropdown boxes inside a div.

I have the following script which hides/unhides within a div based on the dropdown selection and works fine

$(document).ready(function(){
  $('#dec_device_setings').on('change', function() {
       var chipset = $(this).val();
    if (chipset.includes('abc')) {
      $("#dec_device_abc_available").show();
    } else {
      $("#dec_device_abc_available").hide();
    }
    if (chipset.includes('def')) {
      $("#dec_device_def_available").show();
    } else {
      $("#dec_device_def_available").hide();
    }
  });
}
);
</script>

Code (javascript):

I also have the following code that refreshes all the dropdowns when clicked on a button and it works well

<script>
function updateDiv()
{
    $( "#here" ).load(window.location.href + " #here" );
}
</script>

<a onclick='updateDiv ();'>Refresh DropDowns</a>

Code (markup):

When I combine the 2 together, the refresh works but the first script no longer works.

 

1) seriously, kick the mental enfeeblement that is jQuery to the curb.

2) using onevent attributes in the markup is bad practice.

3) if the element only works with scripting enabled, it has no business in the markup given you're just adding junk to confuse scripting blocked/disabled/inapplicable users.

4) Your second script is utterly pointless, since it appears to serve no purpose other than to do the exact same thing as:

<a href="#here">

So... not even JavaScript's job... unless that #here query implies multiple iframes or something else reeking of bad design from an accessibility standpoint. That's hard to say without seeing the markup that's being manipulated.

Much like the show/hide jQuery nonsense that might not even need JavaScript, but that too I'd have to see the markup to weigh in on. There is the distinct possibility that whatever it is you're doing with this code, has no business using JS in the first place.

 

Which is the REAL problem with trying to help. JavaScript or CSS without the HTML being manipulated is like trying to watch a movie through a keyhole. We're blindly guessing here.

Particularly with vague terms like "dropdown" which could be any of a thousand different things code-wise.

A horrifyingly bad way of doing things, ESPECIALLY for a beginner because it means one never learns how to do anything, hobbling one's ability to understand anything, modify anything, or fix a blasted thing.

More so when it's something like jQuery which is adding more crap to learn on top of what you should be learning anyways (JavaScript), does things that are NONE of JavaScript's huffing job, and does so in the most convoluted and improper way possible, often in the process pissing on accessibility, usability, functionality, sustainability, and calling into question the ability of those who CREATED the derpy incompetent framework in the first place.

 

Thanks Sarah. Your suggestion worked.

As previously mentioned, depending on what item is selected within a dropdown box, I will show/hide the appropriate content which is stored in a DIV.

 

Which could mean any of a 100 different things. Is it a SELECT? Are you faking a select with INPUT type="radio" to use CSS styling? What's the sibling relationships? Could adjacent sibling selectors be leveraged to axe the scripting?

Since remember, if you have zero functionality scripting off, you're telling large swaths of potential users to "suck it" and depending on what the site is for, in violation of the WCAG and possibly even liable for violation of certain laws.

Which is why I avoid this type of scripting and tell others to do the same, and get paid good money to rip this type of stuff out of websites.

 

It's just a standard html form with a standard dropdown box
<select>
<option>abc</option>
<option>def</option>
</select>

if abc is selected, show div 1
If def is selected, show div 2