javascript - jQuery 中有两个函数的一个选择框

Question

我想知道选择框是否有可能具有两个功能。

1.使用选择选项时自动重定向value。

2.通过 ajax 将内容加载到最近的 div 中data-file。

<select class="loadurl">
 <option value="#">Select</option>
 <option value="contact.php">Contact</option>
 <option value="about.php">About</option>
 <option data-file="fans.php">Fans</option>
</select>
<div class="area"></div>

但是当我尝试以下脚本时，ajax 选项（Fans）不起作用，而是尝试重定向。我可以知道如何在一个选择框中拥有两个功能吗？这是一个演示。

$(".loadurl").bind('change', function () {

  var selected = $(this).find('option:selected');
  var loadfile =selected.data('file');
  var area = $(".area");

  $(this).next(".area").load(loadfile);
area.empty();

});


$('.loadurl').bind('change', function () {
    window.location.href = $(this).val();
});

Answer 1

您需要在此处使用条件选择 - 如果所选选项已data-file在areaelse 重新加载页面中加载目标。

var area = $(".area");
$(".loadurl").on('change', function () {
    var selected = $(this).find('option:selected');
    var loadfile = selected.data('file');
    if (loadfile) {
        area.empty();
        $(this).next('.area').load(loadfile);
    } else {
        window.location.href = $(this).val();
    }
});