Bootstrap ajax 选项卡在 select 表单更改时重新加载

Question

我有 bootstrap 个带有动态加载内容的选项卡，它工作正常。但是我需要在选择国家/地区后重新加载标签（类似于 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>

有三个选项卡，第一个选项卡上有一个城市列表，第二个选项卡上有一个山脉列表，第三个选项卡上有一个河流列表。从 select 下拉菜单中选择一个国家后，我需要显示来自这个国家的 cities/mountains/rivers。

Answer 1

您可以使用 URL API 使用 URL.searchParams.set()

使用新的国家代码更新 data-url 属性，而不是字符串操作

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>

Bootstrap ajax 选项卡在 select 表单更改时重新加载

Bootstrap ajax tab reload on select form change

jquery

bootstrap-tabs