Question

免责声明：我是编码新手！

我正在尝试按类别对Squarespace网站中的产品进行分类，在这种情况下，按州进行分类。您可以在此处查看站点页面：https://www.compasslandusa.com/listings

现在，类别显示在LHS上。我想删除它（可以轻松地在网站样式中完成），并添加“按状态排序”下拉功能。

我目前正在努力处理下面显示的代码。我的问题是我不知道如何将下拉菜单连接到产品的类别。

我可以轻松地将下拉菜单显示在网站上，但是当我选择一个类别时，页面上的任何内容都没有改变。

您可以在jsfiddle上看到我正在使用的代码。

function sortDropdownList(ddl){

    var options = [].slice.apply(ddl.options, [0]);
    ddl.innerHTML = "";
    var sorted = options.sort(function(a,b){     
       return +(a.innerText) - +(b.innerText);
    });

    for(var i = 0; i < sorted.length; i++){
      ddl.options.add(sorted[i]);
    }  

}
    
var parentSelect = document.getElementById("product");
var childSelect = document.getElementById("power");
var options = [].slice.apply(childSelect, [0]);
var emptyOption = options[0];
childSelect.innerHTML = "";

parentSelect.addEventListener("change", function(e){

    var selectedId = parentSelect.options[parentSelect.selectedIndex].id;
    childSelect.innerHTML = "";
    childSelect.options.add(emptyOption);
    for(var i = 0; i < options.length; i++){

        if( options[i].getAttribute("data-name") == selectedId ){

           childSelect.options.add(options[i]);

        }
    }

    sortDropdownList(childSelect);

});

<table width=100% border="0">
  <tr>
  <td>&nbsp;</td>
    <td>Sort By State:</td>
    <td><select name="product" id="productlist" width="200" style="width: 200px">
      <option></option>
      <option id="Arizona">Arizona</option>
      <option id="Colorado">Colorado</option>
      <option id="Florida">Florida</option>
      <option id="Nevada">Nevada</option>
    </select></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
</table>

所需结果：工作下拉菜单，允许访问者按州分类，即Squarespace产品页面的类别。

非常感谢您愿意提供的任何帮助！谢谢！

按下拉列表对产品页面进行排序（方形）

0 个答案: