亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從對象 HTMLSelectElement 中提取選擇選項值

從對象 HTMLSelectElement 中提取選擇選項值

尚方寶劍之說 2023-03-18 16:59:38
我正在嘗試從同一表單的兩個不同字段的選擇選項中提取值,將這些值轉換為字符串并將這兩個字符串組合起來形成一個 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 的選擇選項中獲取字符串值?如果有人有更好的方法來做到這一點,我愿意接受建議。
查看完整描述

2 回答

?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

您只需要在外部聲明變量即可使用它們。

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>


查看完整回答
反對 回復 2023-03-18
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

您可以使您的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>


查看完整回答
反對 回復 2023-03-18
  • 2 回答
  • 0 關注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號