Question

＆＃13;

            var input, filter, ol, li, a, i;
    function submit() {
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            ol = document.getElementById("myList");
            li = ol.getElementsByTagName("li");
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";

                }
            }
        }

        function changeInstitution(index) {
           if (index == 0) {
               ol = document.getElementById("myList");
               li = ol.getElementsByTagName("li");
               for (i = 0; i < li.length; i++) {
                   li[i].style.display = "";
               }
           }
           else {
               ol = document.getElementById("myList");
               li = ol.getElementsByTagName("li");
               for (i = 0; i < li.length; i++) {
                   a = li[i].getElementsByTagName("a")[0];
                   if (a.href.indexOf('iobm') > -1) {
                       li[i].style.display = index == 1 ? "" : "none";
                   } else {
                       li[i].style.display = index == 1 ? "none" : "";
                   }
               }
           }
       }

       function changeYear(index) {
           if (index == 0) {
               ol = document.getElementById("myList");
               li = ol.getElementsByTagName("li");
               for (i = 0; i < li.length; i++) {
                   li[i].style.display = "";
               }
           }
           else {
               var selectedYear = index.options[index].value;
               ol = document.getElementById("myList");
               li = ol.getElementsByTagName("li");
               for (i = 0; i < li.length; i++) {
                   a = li[i].getElementsByTagName("a")[0];
                   if (a.innerHTML.indexOf(selectedYear) > -1) {
                       li[i].style.display = "";
                   } else {
                       li[i].style.display = "none";
                   }
               }
           } 
       }

＆＃13;

div{
    margin: 50px;
  }
  #sear{
    margin-left: 150px
  }
  span{
    font-size: 17px;
    color: #0e0e0e;
  }

＆＃13;

<div id="sear" >
      <span>Filter results:&nbsp</span>
      <input type="text" id="myInput" name="search" placeholder="Search" style="padding: 5px">
      
      &nbsp  
      <select name="year" id="year" onchange="changeYear(this.selectedIndex);" style="padding: 5px">
        <option value="">Year</option>
        <option >2018</option>
        <option >2017</option>
        <option >2016</option>
        <option >2015</option>
        <option >2014</option>
        <option >2013</option>
        <option >2012</option>
        <option >2011</option>
        <option >2010</option>
      </select>
      &nbsp
      <select name="institution" id="institution" onchange="changeInstitution(this.selectedIndex);" style="padding: 5px">
        <option value="">All</option>
        <option >IoBM</option>
        <option >Others</option>
      </select>
        &nbsp
      <button onclick="submit()"  style="padding: 5px">Search Results</button>
    

    </div>


    <div>
      <h3>Publications:</h3>
      <ol id="myList">
        <li id="2017"><a href="iobm">Dolore laborum consectetur in amet laborum irure dolor id sit adipisicing cillum est 2017.</a></li>
        <li id="2017"><a href="">Pariatur incididunt in occaecat consectetur elit velit tempor exercitation tempor aliqua 2017.</a></li>
        <li id="2016"><a href="">Velit nostrud duis dolore est mollit laborum non eiusmod mollit quis cillum qui id aliquip in in laborum cillum 2016.</a></li>
        <li id="2012"><a href="iobm">Aliqua sunt sed culpa consequat laborum laboris ut esse in consequat 2012. </a></li>
            <li id="2011"><a href="">Lorem ipsum in esse sed incididunt voluptate elit officia eu dolor duis minim nulla id 2011. </a></li>
        <li id="2011"><a href="">Dolore enim ad veniam cupidatat culpa aliquip voluptate adipisicing consequat anim pariatur in duis adipisicing 2011.</a></li>
        <li id="2010"><a href="iobm">Pariatur aute sit officia eu quis adipisicing laboris quis sed in id occaecat 2010.</a></li>
      </ol>
    </div>

＆＃13;

所以，伙计们，我需要配置两个选择框和一个带按钮的输入字段，所有这三个元素都具有迭代列表并过滤所需结果的功能。但是，选择框存在问题，它们都会相互覆盖。并且由于它们的相关函数接受两个参数，因此无法使用按钮进行配置。我只想用我的代码在用户输入后，选择选项然后单击按钮，然后才显示结果。这就是全部。

如果你能提供帮助，我会很高兴的！

Answer 1

如果您想在点击按钮后才有效，那么我认为您不需要在下拉列表中添加onchange调用。

当更改元素的值时会发生onchange事件。

你应该有一个函数用于迭代和选择绑定到按钮onclick的输出，这应该根据选择框的选定值工作。

如果您希望在选择框中的值更改时生效，则还需要定义onchange方法。

编辑：

所以我会改变它以使它工作：

而不是使用a href来过滤列表，我会为每个li定义name ='instution_name'
删除onchange方法并定义单个提交方法
类似于（伪代码）：

提交方法：

function submit() {
    // Declare separate filter for year and institution
    var year_input,institution_input , year_filter, institution_filter, ul, li, a, i;
    year_input = document.getElementById('year');
    // this will hold the selected year e.g. 2018
    year_filter = year_input.value.toUpperCase();
    institution_input = document.getElementById('institution');
    // this will hold the selected institution
    institution_filter = institution_input.value.toUpperCase();
           ol = document.getElementById("myList");
           li = ol.getElementsByTagName("li");

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
    // based on your html put the proper condition here
        if (li[i].id == year_filter && li[i].name == institution_filter)  {
        // show if both condition apply        
            li[i].style.display =  "" ;
        } else {
        //hide otherwise
            li[i].style.display = "none";
        }
    }
}

我需要配置两个选择框和一个带按钮的输入字段

1 个答案: