I'm trying to run a simple jQuery function in wordpress to hide and show content depending on a drop-down list, the code works fine outside wordpress, but when I add it to my child theme display all the content. I've checked the header and the jQuery file is loaded properly.
jQuery(document).ready(function() {
$('#id_BJ').closest('article').addClass('city_table').hide();
$('#id_SH').closest('article').addClass('city_table').hide();
$('#id_SZ').closest('article').addClass('city_table').hide();
$('#id_chinese_city').change(function() {
$('article.city_table').hide();
$('#id_' + $(this).val()).closest('article').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="chinese_city" id="id_chinese_city">
<option value="">Choose first</option>
<option value="BJ">Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<article id="id_BJ">
</br>
<h3>Beijing</h3></article>
<article id="id_SH">
</br>
<h3>Shanghai</h3></article>
<article id="id_SZ">
</br>
<h3>Shenzhen</h3></article>
I've also tried to using tags but the result is the same
any ideas why this is happening?