使用javascript基于URL预选值

我目前正在一个网站上工作，该网站有一个搜索引擎，包括带有过滤器的高级搜索选项。我希望选择基于url的类别，以便显示相关过滤器。例如，如果访问者位于domain.com/category/adventure，则该类别被预先选择为“adventure”。我不太清楚如何读取url

<script>

var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")

// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";

// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {

if (mainCat.value == "-1") 
{
  customFields.style.display = "none";
}
else
{
  customFields.style.display = "inline";
}

})

</script>

mainCat的可能价值包括：冒险、烹饪、一日游等等。我希望根据url domain.com/category/adventure选择这些值。。。domain.com/category/coulinary。。 customFields是一个div容器的id，它显示包含php生成内容的所有过滤器。mainCat是类别的id，如果值为-1，则不选择任何类别。

使用window.location：

---

console.logwindow.location.pathname 要预先选择元素的类别，可以从包含URL的浏览器的当前位置提取类别，然后相应地更新元素的值：

<script>

  var mainCat = document.getElementById("main_cat")
  var customFields = document.getElementById("custom_fields")

  // When the website first loads, hide "custom_fields" by default
  customFields.style.display = "none";

  // When the user changes the main_cat select, check it's value. If
  // value == "-1" then hide custom_fields. Otherwise display custom
  // fields as inline
  mainCat.addEventListener("change", function() {

  if (mainCat.value == "-1") 
  {
    customFields.style.display = "none";
  }
  else
  {
    customFields.style.display = "inline";
  }

  })

  //[ADDED]

  // Extract category from current url
  const category = location.pathname
  .split('/') // Break pathname to array of strings, split by '/' characters
  .filter(function(item) { return !!item; }) // Remove any empty strings from array
  .splice(-1); // Get last string (your category) from array

  // Update value of select element to current category
  document.getElementById("main_cat").value = category;

</script>

使现代化 根据网站的CSS和DOM结构，对代码的这些调整应达到您的要求：

<script>


    // [ ADDED ]
  function updateCategoryFilters(category) {
    // Reset visiblitiy of all fields
    for(const node of document.querySelectorAll('#custom_fields .custom-field-cat')) {
      node.style.display = "none";
    }

    if(category) {

      category = category.toLowerCase()

      // If category is valid, set visiblitiy of fields for that category
      for(const node of document.querySelectorAll('#custom_fields .custom-field-cat-' + category)) {
        node.style.display = ""; // [ UPDATED ]
      }
    }


  }

  var mainCat = document.getElementById("main_cat")

  // When the user changes the main_cat select, check it's value. If
  // value == "-1" then hide custom_fields. Otherwise display custom
  // fields as inline
  mainCat.addEventListener("change", function() {

    // [ UPDATED ]
    updateCategoryFilters(mainCat.value)
  })

  //[ADDED]

  // Extract category from current url
  const category = location.pathname
  .split('/') // Break pathname to array of strings, split by '/' characters
  .filter(function(item) { return !!item; }) // Remove any empty strings from array
  .splice(-1); // Get last string (your category) from array

  // [ UPDATED ]
  // Update value of select element to current category
  updateCategoryFilters(category);

  // [ UPDATED ]
  document.getElementById("main_cat").value = category;

</script>

---

谢谢你的回答！现在的问题是，值为-1的Select选项被覆盖。类别名称已在列表中选定，但未真正选定。因此，现在它只是显示类别名称，而不是从列表中选择类别名称，可以选择不应该是选项值的选择选项。我用document.getElementByIdmain\u cat.selected或document.getElementByIdmain\u cat.options尝试了它，但没有成功。有什么想法吗？根据URL选择类别，但未显示预选类别的过滤器？是的，还可以选择select category-1值。您能发送一个指向导致问题的页面的链接吗？travelmarketdirectory.com/category/adventure/此处使用脚本更新