Question

如何传递标签（而不是选项）以从下拉列表中预选javascript？

例如，假设URL为page.html？option = name3

并且在表单中有一个这样的选择

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>

在此示例中，Name3和3不同。

可以使用哪种JavaScript预先选择文本内容与上面的URL参数相匹配的选项？

Answer 1

您需要使用javascript如下设置元素的selectedIndex。首先，解析网址以获取所需的查询选项。您可以使用window.location API来获取URL并对其进行操作。然后，遍历select元素的每个选项，并使用一些逻辑来确定一个好的匹配项。

我希望这会有所帮助。

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>
<script>
   // to get option we use some parsing:
   function getOption(url) {
     var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
     if (queryString){
       var optionString = queryString.split('=')[1];
       // returns string for options if specified.
       return optionString;
     }
     // return null otherwise.
     return null;
   }
   var e = document.getElementById("select-box");
   // var o = getOption(window.location.href);
   // var o = getOption(document.url) // does not work for Firefox
   // replace this with one of the lines above for dynamic solution
   var o = getOption('page.html?option=name3');
   if(o) {
     for(var i=0; i<e.options.length; i++) {
       if(o === e.options[i].innerHTML.toLowerCase()){
        // be careful about case sensitivity and try to come up
        // with your own logic on how you validate this,
        document.getElementById("select-box").selectedIndex = i;
       }
     }
   }else {
    // if no option default to 0
    document.getElementById("select-box").selectedIndex = 0;
   }
</script>

Answer 2

从当前页面的URL中读取查询参数：https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

const optionParam = new URLSearchParams(window.location.search).get('option'); // "Name3"

，然后将 Select value设置为textContent匹配的选项

// const optionParam = new URLSearchParams(window.location.search).get('option');
const optionParam = "Name3"; // (PS: Use the above one instead, this is for demo)

const sel = document.getElementById("select-box");
const opt = [...sel.options].find(op => op.textContent===optionParam);
if (opt) sel.value = opt.value;

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>

使用URL参数按标签而非值预选选项

2 个答案: