jquery - 选择表单更改时引导 ajax 选项卡重新加载
问题描述
我有带有动态加载内容的引导选项卡,它工作正常。但是我需要在选择国家后重新加载标签(类似于a.replace( /countryId=[^&]*/ig, 'countryId='+o.target.value)
)。谁能帮我?谢谢
$('#maps a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
$(href).load(url,function(result){
pane.tab('show');
});
});
$('#cities').load($('.active a').attr("data-url"),function(result){
$('.active a').tab('show');
});
...
<select id="country-select">
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
<option value="RUS">Russia</option>
<option value="SVK">Slovakia</option>
<option value="SWE">Sweden</option>
<option value="USA">USA</option>
</select>
<ul class="nav nav-tabs" id="maps">
<li class="nav-item active">
<a class="nav-link active" data-toggle="pill" href="#cities" data-url="map.jsp?show=cities&countryId=FIN">Cities</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#mountains" data-url="map.jsp?show=mountains&countryId=FIN">Mountains</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#rivers" data-url="map.jsp?show=rivers&countryId=FIN">Rivers</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane container active" id="cities">
<div style="text-align: center; margin-top: 3rem;">
<img src="images/loading.gif" alt="Loading..."/>
</div>
</div>
<div class="tab-pane container fade" id="mountains">
<div style="text-align: center; margin-top: 3rem;">
<img src="images/loading.gif" alt="Loading..."/>
</div>
</div>
<div class="tab-pane container fade" id="rivers">
<div style="text-align: center; margin-top: 3rem;">
<img src="images/loading.gif" alt="Loading..."/>
</div>
</div>
</div>
有三个选项卡,第一个选项卡上有城市列表,第二个选项卡有山脉列表,第三个选项卡有河流列表。从选择下拉菜单中选择一个国家后,我需要显示这个国家的城市/山脉/河流。
解决方案
URL API
您可以使用来使用新的国家/地区代码更新data-url
属性,而不是字符串操作URL.searchParams.set()
var $tabLinks = $('#maps a')
function updateCountryId(countryId) {
var baseUrl = location.href;
// loop over tabs links and update `data-url`
$tabLinks.each(function() {
var $a = $(this);
// new URL object
var url = new URL($a.data('url'), baseUrl);
// update countryId param
url.searchParams.set('countryId', countryId);
// update data attribute
$a.attr('data-url', url.href)
});
}
$('#country-select').change(function() {
updateCountryId($(this).val())
$tabLinks.first().click()
});
// demo click handler just to log url. Your current one should need no changes
$tabLinks.click(function() {
console.log($(this).attr('data-url').replace('https://stacksnippets.net/',''))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id="country-select">
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
<option value="RUS">Russia</option>
<option value="SVK">Slovakia</option>
<option value="SWE">Sweden</option>
<option value="USA">USA</option>
</select>
<ul class="nav nav-tabs" id="maps">
<li class="nav-item active">
<a class="nav-link active" data-toggle="pill" href="#cities" data-url="map.jsp?show=cities&countryId=FIN">Cities</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#mountains" data-url="map.jsp?show=mountains&countryId=FIN">Obránci</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#rivers" data-url="map.jsp?show=rivers&countryId=FIN">Obránci</a>
</li>
</ul>
推荐阅读
- postgresql - 将新列添加到 Postgres 物化视图
- reactjs - 在 React 中更改多个键值和 setState
- python - 如何让 discord.py 等待
- algorithm - 如何为这个类似“球和盒子”的背包问题创建一个贪心算法?
- python - 转换为浮点数以获取前 10 个最大值时出错
- python - 我怎样才能加快这段代码?应用和 for 循环确实减慢了速度
- android - 在 appcenter 中,单元测试失败仅指定函数名称和行号
- c++ - 带有结构的链表的奇怪行为
- git - git merge master 没有将 master 的更改/冲突合并到本地分支
- r - 对于 ggplot2 图例键,添加与其他美学颜色匹配的边框,不填充