从对象 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) {

  slug1 = e1.options[e1.selectedIndex].value;

}

function functionTwo(e2) {

  slug2 = e2.options[e2.selectedIndex].value;

}

function submit() {

  console.log(slug1);

  console.log(slug2);

  //window.location = 'https://example.com/' + slug1 + '-' + slug2;

}

<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 submit() {

  var slug = [];

  // create array

  [...document.querySelectorAll("select")].forEach(sel => {

    slug.push(sel.options[sel.selectedIndex].value);

    // get values of each select and push into array

  });

  var link = 'https://example.com/' + slug[0] + '-' + slug[1]

  // use array

  

  //window.location = link

  console.log(link);

}

<select>

  <option value="test1">Test One</option>

  <option value="test2">Test 2</option>

</select>

<select>

  <option value="test1">Test 1</option>

  <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 slug1

var slug2

//Change function

function functionOne(e1) {

  slug1 = e1.options[e1.selectedIndex].value;

}

function functionTwo(e2) {

  slug2 = e2.options[e2.selectedIndex].value;

}

//Submit

function submit() {

  //window.location = 'https://example.com/' + slug1 + '-' + slug2);

  let location = 'https://example.com/' + slug1 + '-' + slug2;

  console.log(location) //https://example.com/test1-test1

}

<select onChange="functionOne(this);">

  <option disbaled selected>Choose</option>

  <option value="test1">Test One</option>

  <option value="test2">Test 2</option>

</select>

<select onChange="functionTwo(this);">

  <option disbaled selected>Choose</option>

  <option value="test1">Test 1</option>

  <option value="test2">Test 2</option>

</select>

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