jQuery顯示基於選擇值動態隱藏div

Question

我有一個正在處理的項目，需要顯示/隱藏一個依賴於選擇的分區。 在選擇我想要的小組的隱藏女主角時，我需要這樣做。 最初，數量和金額不知道！ 目前，它適用於＃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();
});

現場演示

Answer 2

要通過其值設置選項，您需要使用：

$('#selectField_1 option[value="51"]');

並選擇它：

$('#selectField_1 option[value="51"]').prop('selected', true);

Answer 3

也許您可以這樣：

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

在你的js中：

$("#your_select_id").find("option.selected").show()

Answer 4

正如Ehsaan Sajjad所說，對下拉菜單應用類可使用單個選擇器訪問所有下拉列表，例如

<select id="selectField_1" class="ddlClass">
    <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" class="ddlClass">
    <option value="55" selected>option1</option>
    <option value="56">option2</option>
    <option value="57">option3</option>
    <option value="58">option4</option>
</select>

並在您的div中再添加一個類以默認隱藏所有div，例如

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

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

並在CSS中編寫

.boxdiv{ display: none;}

現在您的jQuery代碼將如下所示

$('.ddlClass').change(function () {

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