當HTML中的其他選擇框更改時，更改選擇框的樣式

Question

我正在嘗試更改其他選擇框時更改選擇框的CSS屬性。

當Id = project-type時，其值比bgt-hourly改變，並且bgt-fixed選擇框顯示相應的顯示。

如果每小時顯示比bgt-hourly應該顯示，並且當它選擇固定時，應該顯示bgt-fixed選擇選項。

我嘗試了很多次使用來自堆棧溢出的不同代碼，但這並沒有很好地幫助我。

如果有人可以解決這個問題，我將不勝感激。

謝謝

我有以下代碼：

HTML：

<span class="service-tab">
    <span class="sub-cat span6">
        <label for="project-type">Project Type:</label>
        <select class="project-type  " id="project-type" >
            <option value="hourly">Hourly</option>
            <option value="fixed">Fixed</option>
        </select>
    </span>
    <span class="sub-cat span6 " id="bgt-fixed">
        <label for="budget">Budget:</label>
        <select class="budget  " id="budget" required >
            <option value="250">$0 - $250</option>
            <option value="750">$250 - $750</option>
            <option value="5000">$750 - $5000</option>
            <option value="5000">$1500 - $5000</option>
            <option value="5000">$3000 - $5000</option>
            <option value="10000">$5000 - $10000</option>
            <option value="10001">$10000 and Above</option>
        </select>
    </span>
    <span class="sub-cat span6" id="bgt-hourly">
        <label for="budget-hourly">Budget:</label>
        <select class="budget-hourly" id="budget-hourly" required>
            <option value="10">$0 - $10</option>
            <option value="20">$10 - $20</option>
            <option value="50">$20 - $50</option>
            <option value="100">$50 - $100</option>
            <option value="200">$100 - $200</option>
        </select>
    </span>
</span>

JS：

<script type="text/javascript">
$(document).ready(function(){

    $("#project-type").change(function(){
        if($('#project-type').val() == "fixed")
        {
            $('#bgt-fixed').show();
            alert('value 1 (wich refers to Chef) got selected');
        }
    });
    if($(this).val() == "hourly")
        {
            alert('value 1 (wich refers to Chef) got selected');
        }
    });


    });

Answer 1

錯誤：您已將if($(this).val() == "hourly")放在更改函數之外。

嘗試：

$(document).ready(function () {
    $("#project-type").change(function () {
        if ($('#project-type').val() == "fixed") {
            $('#bgt-fixed').show();
            alert('value 1 (wich refers to Chef) got selected');
        } else if ($(this).val() == "hourly") {
            alert('value 1 (wich refers to Chef) got selected');
        }
    });
});

演示

Answer 2

不得將類或id設置為相同的最佳代碼做法

$("#project-type").change(function(){}

這應該是

$(".project-type").change(function(){}

和

<select class="project-type" id="projects" >

消除多余的空間

Answer 3

$(".project-type").change(function(){...}

Answer 4

嘗試這個：

  $(document).ready(function(){

    $("#project-type").change(function(){
        if($('#project-type').val() == "fixed")
        {
            $('#bgt-fixed').show();
            $('#bgt-hourly').hide();
            $('#project-time').hide();
            $('#project-hours').hide();

        }
        else if($(this).val() == "hourly")
        {
            $('#bgt-hourly').show();
            $('#bgt-fixed').hide();
            $('#project-time').show();
            $('#project-hours').show();

        }
    });    
});