[英]Change option values of select 2 if select 1 has a value with jquery
I require a bit of jQuery to do the following:我需要一点 jQuery 来执行以下操作:
A user can currently select Program and/or a region.用户当前可以选择节目和/或区域。
If a user selects Program AND a Region I require the option values of the region dropdown to change to "?region=1" and "?region=2"如果用户选择程序和区域,我需要区域下拉列表的选项值更改为“?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>
Greatly appreciate the assist.非常感谢帮助。
My attempt at JQuery:我对 JQuery 的尝试:
$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })
You need to further extend the change
event for #program
and include a similar one for #region
.您需要进一步扩展#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>
Explanation of the logic above:对上面逻辑的解释:
on('change'
event for both #region
and #program
on('change'
#region
和#program
on('change'
事件programSelected
or regionSelected
depending on the change
event根据change
事件设置相关变量programSelected
或regionSelected
updateRegionOptions();
运行函数updateRegionOptions();
programSelected
and regionSelected
both have a value如果变量programSelected
和regionSelected
都有值#region
对于#region
每个选项value
to be of the form "?region=1" and "?region=2"
将现有value
更改为"?region=1" and "?region=2"
value
section of each of the option
elements to have this value更新每个option
元素的value
部分以具有此值The relevant JSFiddle for review.相关的JSFiddle进行审查。
If this solved your issue, please accept this answer :)如果这解决了您的问题,请接受此答案:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.