Fatal编程技术网

Javascript 多重下拉滤波

javascript filter

Javascript 多重下拉滤波,javascript,filter,dropdown,Javascript,Filter,Dropdown,我对Javascript非常陌生，因此我将详细介绍下面重新创建问题的步骤。我还设置了一个JSFIDLE <td> <div> <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding: <td&g

我对Javascript非常陌生，因此我将详细介绍下面重新创建问题的步骤。我还设置了一个JSFIDLE

          <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

          <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

            <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:


          <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

          <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

            <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:
重新创建问题的步骤：

          <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

          <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

            <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:
  • 从下拉列表1中选择“工作队列”
  • 从下拉列表2中选择“谷歌”。（显示谷歌-正常工作）
  • 从下拉列表2中选择“Yahoo”。（显示雅虎-正常工作）
  • 从下拉列表1中选择“代理”，然后从下拉列表2中选择“Claire”（显示Claire-正常工作）
  • 从下拉列表2中选择“Darren”（显示Darren-正常工作）
  • 再次从下拉列表1中选择“工作队列”…Darren继续显示…这就是问题所在）
    • 为什么即使选择了不同的选项，Darren仍会继续显示？可以放置哪些代码来帮助解决此问题

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:
    非常感谢

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:
    HTML:

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:
    1. 

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    
选择类别。。。
工作队列
代理人

    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    
2.
选择队列。。。
谷歌
雅虎

    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    
选择代理。。。
克莱尔
达伦
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                  </select>
            </div>

          </td>
          </div>

        </tr>   </table> </center>

    

    

    


    
谷歌
雅虎
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    <div class="claire agentcard">Claire</div>
<div class="darren agentcard">Darren</div> </center> </div>

    
克莱尔
戴伦

    

    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    虽然您在正确的选择菜单上触发了该功能，但您正在运行每个选择菜单的选定选项元素，随后的选择会删除您想要的效果
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    
替换此项：
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    $(document).ready(function() {
  $("select").change(function() {
    $("select option:selected").each(function() {

    
与：
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    
要显示新显示的选定项，请选择已选定的选项：
为第二个选择添加更改触发器：
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

      if ($(this).attr("value") == "queuelist") {
   ....
  $(".queuelist").show();
    $(".queuelistselect").change();

    
（与“代理列表”相同）
    

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

    99.9%。因此，如果我按照上面的步骤操作，而不是第6步失败，它会与您的解决方案一起工作…它不会显示以前打开的工作队列，在本例中，Yahoo…再次编辑它，因为我弄乱了菜单名。这是对代码样式的最小更改。理想的情况下，你可以做一些筑巢。当场！非常感谢你！随机问题，当在下拉列表中选择某个选项时，是否可以完全刷新目标页面？我会发现这一点特别有用，因为目标页面上的内容可能会发生更改，用户总是可以获得默认页面。如果您指的是重新加载页面，当然也可以在某些select的更改事件中通过window.location.assign（url）进行。但这意味着以前的选择也会被重置。或者，必须使用javascript（.submit（））在同一事件上触发表单提交。

              <td>
            <div>
              <select style="width: 100%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

              <td>
            <div class="queuelist agentlist largetext">2. </div>
          </td>

          <td>
            <center>
              <div class="catlist" style="font-family: Sky Text Regular; font-size: 28px; color: #009CDD;"></div>
            </center>

            <div class="queuelist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding:

    

                <div class="agentlist">
              <select style="width: 90%; border-radius: 6px 6px 6px 6px; font-family: Sky Text Regular; font-size: 18px; padding: