javascript - jquery 根据动态选择值显示隐藏 div

Question

我正在开发一个项目，需要根据选择显示/隐藏一个部门。 我需要它来选择我想要的团体中隐藏的女主 Angular 。最初，数量和金额都不知道!目前它适用于#selectField_1 和box_1。但 我不想做静态脚本我想让它动态

<script>
    $(document).ready(function (value) {
        $('.box_1').hide();

        $('#51').show(); <==================Need Selected value from <select> as Default

        $('#selectField_1').change(function () {
            $('.box_1').hide();
            $('#'+$(this).val()).show();
        });
    });
</script>

<select id="selectField_1">
    <option value="51" selected>option1</option>
    <option value="52">option2</option>
    <option value="53">option3</option>
    <option value="54">option4</option>
</select>

<select id="selectField_2">
    <option value="55" selected>option1</option>
    <option value="56">option2</option>
    <option value="57">option3</option>
    <option value="58">option4</option>
</select>

.......................................

<select id="selectField_n">
    <option value="n" selected>option1</option>
    <option value="n">option2</option>
    <option value="n">option3</option>
    <option value="n">option4</option>
</select>

</br> 

<div id="51" class="box_1">Content 51</div>
<div id="52" class="box_1">Content 52</div>
<div id="53" class="box_1">Content 53</div>
<div id="54" class="box_1">Content 54</div>

<div id="55" class="box_2">Content 55</div>
<div id="56" class="box_2">Content 56</div>
<div id="57" class="box_2">Content 57</div>
<div id="58" class="box_2">Content 58</div>

...........................................

<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>

Answer 1

在下拉菜单上应用类:

<select id="selectField_1" class="SelectField">
        <option value="51" selected>option1</option>
        <option value="52">option2</option>
        <option value="53">option3</option>
        <option value="54">option4</option>
</select>

你必须这样做:

$('.SelectField').each(function(){
    $('.box_'+this.id.split('_')[1]).hide();
    $('#'+$(this).val()).show();
});

$('.SelectField').change(function () {
    $('.box_'+this.id.split('_')[1]).hide();
    $('#'+$(this).val()).show();
});

FIDDLE DEMO