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

Question

我正在尝试从同一表单的两个不同字段的选择选项中提取值，将这些值转换为字符串并将这两个字符串组合起来形成一个 URL slug。

<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);

  

}

那是我的代码，为了这个例子的目的而简化了。

问题是我得到以下结果：

https://example.com/[对象 HTMLSelectElement]-[对象 HTMLSelectElement]

如何从我可以用作 URL 中的 slug 的选择选项中获取字符串值？如果有人有更好的方法来做到这一点，我愿意接受建议。

Answer 1

您只需要在外部声明变量即可使用它们。var slug1 = "";var slug2 = "";function functionOne(e1) {&nbsp; slug1 = e1.options[e1.selectedIndex].value;}function functionTwo(e2) {&nbsp; slug2 = e2.options[e2.selectedIndex].value;}function submit() {&nbsp; console.log(slug1);&nbsp; console.log(slug2);&nbsp; //window.location = 'https://example.com/' + slug1 + '-' + slug2;}<select onChange="functionOne(this);">&nbsp; <option value="test1">Test One</option>&nbsp; <option value="test2">Test 2</option></select><select onChange="functionTwo(this);">&nbsp; <option value="test1">Test 1</option>&nbsp; <option value="test2">Test 2</option></select><button id="submit" class="btn" type="button" onclick="submit();">Submit</button>而且由于您要求更好的方式建议，您可以在提交时只使用一个功能，不会更好，也许只是更清洁。例子：function submit() {&nbsp; var slug = [];&nbsp; // create array&nbsp; [...document.querySelectorAll("select")].forEach(sel => {&nbsp; &nbsp; slug.push(sel.options[sel.selectedIndex].value);&nbsp; &nbsp; // get values of each select and push into array&nbsp; });&nbsp; var link = 'https://example.com/' + slug[0] + '-' + slug[1]&nbsp; // use array&nbsp;&nbsp;&nbsp; //window.location = link&nbsp; console.log(link);}<select>&nbsp; <option value="test1">Test One</option>&nbsp; <option value="test2">Test 2</option></select><select>&nbsp; <option value="test1">Test 1</option>&nbsp; <option value="test2">Test 2</option></select><button id="submit" class="btn" type="button" onclick="submit();">Submit</button>

Answer 2

您可以使您的slug1和slug2作为全局范围可访问var，以便能够在submit功能中使用它们。此外，您还可以return从您的函数中获得functionOne一个。functionTwosubmit现场演示：var slug1var slug2//Change functionfunction functionOne(e1) {&nbsp; slug1 = e1.options[e1.selectedIndex].value;}function functionTwo(e2) {&nbsp; slug2 = e2.options[e2.selectedIndex].value;}//Submitfunction submit() {&nbsp; //window.location = 'https://example.com/' + slug1 + '-' + slug2);&nbsp; let location = 'https://example.com/' + slug1 + '-' + slug2;&nbsp; console.log(location) //https://example.com/test1-test1}<select onChange="functionOne(this);">&nbsp; <option disbaled selected>Choose</option>&nbsp; <option value="test1">Test One</option>&nbsp; <option value="test2">Test 2</option></select><select onChange="functionTwo(this);">&nbsp; <option disbaled selected>Choose</option>&nbsp; <option value="test1">Test 1</option>&nbsp; <option value="test2">Test 2</option></select><button id="submit" class="btn" type="button" onclick="submit();">Submit</button>