如果選擇 1 具有 jquery 的值，則更改選擇 2 的選項值

Question

我需要一點 jQuery 來執行以下操作：

用戶當前可以選擇節目和/或區域。

如果用戶選擇程序和區域，我需要區域下拉列表的選項值更改為“?region=1”和“?region=2”

<select class="program" id="program">
            <option value="program1.html">Program 1</option>
            <option value="program2.html">Program 2</option>
</select>

<select class="region" id="region">
            <option value="region1.html">Region 1</option>
            <option value="region2.html">Region2</option>
</select>

非常感謝幫助。

我對 JQuery 的嘗試：

$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })

Answer 1

您需要進一步擴展#program的change事件，並為#region包含一個類似的事件。

 var programSelected = null; var regionSelected = null; $('#program').on('change', function(element) { programSelected = $('#program option:selected').text(); updateRegionOptions(); }); $('#region').on('change', function(element) { regionSelected = $('#region option:selected').text(); updateRegionOptions(); }); function updateRegionOptions() { if(programSelected != null && regionSelected != null) { $('#region option').each(function() { var modifiedString = '?'; modifiedString += $(this).val().replace(/\\d+/,''); modifiedString = modifiedString.replace('.html',''); modifiedString += '='; modifiedString += $(this).val().match(/\\d+/); $(this).val(modifiedString); }); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="program" id="program"> <option value="" selected disabled>Select Program</option> <option value="program1.html">Program 1</option> <option value="program2.html">Program 2</option> </select> <select class="region" id="region"> <option value="" selected disabled>Select Region</option> <option value="region1.html">Region 1</option> <option value="region2.html">Region2</option> </select>

對上面邏輯的解釋：

1. on('change' #region和#program on('change'事件
2. 根據change事件設置相關變量programSelected或regionSelected
3. 運行函數updateRegionOptions();
4. 如果變量programSelected和regionSelected都有值
5. 對於#region每個選項
6. 將現有value更改為"?region=1" and "?region=2"
7. 更新每個option元素的value部分以具有此值

相關的JSFiddle進行審查。

如果這解決了您的問題，請接受此答案:)