Javascript 从对象HTMLSelectElement提取选择选项值

我试图从同一表单中的两个不同字段的select选项中提取值，将值转换为字符串，并将这两个字符串组合成一个URL段塞

<select onChange="functionOne(this);">
   <option value="test1">Test One</option>
   <option value="test2">Test 2</option>
</select>

<select onChange="functionTwo(this);">
   <option value="test1">Test 1</option>
   <option value="test2">Test 2</option>
</select>

<button id="submit" class="btn" type="button" onclick="submit();">Submit</button>


function functionOne(e1) {
  var slug1 = e1.options[e1.selectedIndex].value;
}

function functionTwo(e2) {
  var slug2 = e2.options[e2.selectedIndex].value;
}

function submit(){
  window.location = 'https://example.com/' + slug1 + '-' + slug2);
  
}

测试一
测试2
测试1
测试2
提交
功能一（e1）{
var slug1=e1.options[e1.selectedIndex].value；
}
功能二（e2）{
var slug2=e2.options[e2.selectedIndex].value；
}
函数提交（）{
window.location=https://example.com/“+slug1+”-“+slug2）；
}

这是我的代码，为了本例的目的简化了代码

问题是我得到了以下结果：

HTMLSelectElement]-[对象HTMLSelectElement]

---

如何从select选项中获取字符串值，并将其用作URL中的slug？如果有人有更好的方法，我愿意接受建议。

您可以使您的

slug1

和

slug2

作为全局

var

范围访问，以便能够在

submit

功能中使用它们

此外，您还可以从

submit

函数中的

functionOne

和

functionTwo

获取

返回

现场演示：


1
var slug2
//变换函数
功能一（e1）{
slug1=e1.options[e1.selectedIndex]。值；
}
功能二（e2）{
slug2=e2.options[e2.selectedIndex].value；
}
//提交
函数提交（）{
//window.location=https://example.com/“+slug1+”-“+slug2）；
让我们来看看https://example.com/“+slug1+”-“+slug2；
console.log（位置）//https://example.com/test1-test1
}

选择
测试一
测试2
选择
测试1
测试2
提交
您只需在外部声明变量即可使用它们


var slug1=“”；
var slug2=“”；
功能一（e1）{
slug1=e1.options[e1.selectedIndex]。值；
}
功能二（e2）{
slug2=e2.options[e2.selectedIndex].value；
}
函数提交（）{
控制台日志（slug1）；
控制台日志（slug2）；
//window.location=https://example.com/“+slug1+”-“+slug2；
}

测试一
测试2
测试1
测试2
提交
我怀疑你是否明白，因为
slug1
和
slug2
只能在
functionOne
和
functionTwo
内部访问-在简化代码时，重要的是不要改变代码的实际工作方式。。。您的提交将以
https://example.com/undefined-undefined