表单中的 javascript 顺序下拉菜单，用于更改 URL 值

Question

我有一个 php 文件:export.php，其中有一个带有选择下拉菜单的表单。

dd1 和 dd2，其中选择 dd1 时，dd2 的选项列表将从 SQL 表中填充。

JS函数:

function reload(form) {
        var val = form.cat.options[form.cat.options.selectedIndex].value;
        self.location = 'export.php?cat=' + val;
}

<form>

<!------------- dd1 -------------->
<select name="category" onchange="reload(this.form)">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<!--------- dd2 -------------->
<select name="subcategory">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

我想要的是这样的网址: 导出.php?cat=a&subcat=1当我在选择 dd1 选项后从 dd2 中选择一个选项时。

目前仅更改为:export.php?cat=a。

请帮忙。

提前致谢!

Answer 1

这里是:

  $(document).ready(function(){

$( "select[name=category],select[name=subcategory]" ).change(function() {

  var cat= $("select[name=category] option:selected").text();
  var subcat= $("select[name=subcategory] option:selected").text();

  var url = 'export.php?cat='+cat+'&subcat='+subcat;

  console.log(url);
});

});

您还必须删除

onchange="reload(this.form)

在 ddl1 上，因为它进行了重定位，这将提出新的请求!

如果您只想在选择了 ddl1 和 ddl2 中的值时才进行重定位。我会使用两个下拉列表的默认值，例如

--choose--

然后您可以检查 onchange 处理程序(伪代码)

if (ddl1.selectValue!= --choose-- and  ddl2.selectValue!= --choose--){
window.location = url;
}