Question

我有这个下拉列表。

想法是当你点击下拉列表并点击任何项目时，我想有一个单独的按钮，我可以放在我的页面上的任何位置，将下拉菜单重置为“1st”。

有什么建议吗？

<!-- .ajaxd-posts --><script type="text/javascript">(function($) {$("#ajaxd-select-37006").change(function(){$.post("http://www.willgetitnow.com/wp-admin/admin-ajax.php",{"action":"ajax_dropdown","post_id":$(this).val()},function(response){if(response!=0){$("#ajaxd-posts-37006").html(response)};});}).trigger("change");})(jQuery);</script></h4>
</div>

<div id="services_rightarea">
<h4 style="text-align: center;"><select class="ajaxd-select" name="ajax_post" id="ajaxd-select-37006"><option value="33251" data-permalink="http://www.blablabla.com/choose-a-state/" selected="selected">Choose a State</option><option value="8984" data-permalink="http://blablabla.com/california-restaurants/">California</option></select><div class="ajaxd-posts" id="ajaxd-posts-37006"><div class="ajaxd-post" id="ajaxd-post-33251"></div></div>
</div>




<h4 style="text-align: center;"><button type="button" >reset</button>
<p>reset to "Choose your state"<p>

Answer 1

在按钮上添加onclick事件，并将下拉列表的selected index设置为0

<select class="ajaxd-select" name="ajax_post" id="ajaxd-select-37006"><option value="33251" data-permalink="http://www.blablabla.com/blablabla" selected="selected">first</option><option value="8984" data-permalink="http://">2nd</option><option value="8984" data-permalink="http://">3rd</option><option value="8984" data-permalink="http://">4th</option><option value="8984" data-permalink="http://">5th</option><option value="8984" data-permalink="http://">6th</option></select>

<button type="button" onclick="myFunction()" >reset</button> reset to "1st"
<script>
function myFunction() {
    document.getElementById("ajaxd-select-37006").selectedIndex =0;
    //remove all options except first
    document.getElementById("ajaxd-select-37006").options.length = 1;
}
</script>

我查看了您的源代码，请参阅下面的内联评论：

<script type="text/javascript">
    (function($) {
        $("#ajaxd-select-37006").change(function() {

            // this function gets called everytime you change dropdwon selection
            $.post("http://www.willgetitnow.com/wp-admin/admin-ajax.php", {
                "action": "ajax_dropdown",
                "post_id": $(this).val()
            }, function(response) {
                if (response != 0) {
                    $("#ajaxd-posts-37006").html(response) // here you are assiging values to dropdown
                };
            });
        }).trigger("change");
    })(jQuery);
</script>

因此，无论我想在按钮点击上做什么都不是很重要，当涉及到删除所有元素时，我共享的代码选择第一项（并删除所有其他条目！）但是一旦你去了更改下拉列表中的选定项目，通过ajax请求重新填充项目。

Answer 2

好吧所以我编辑了我的答案并希望这有帮助！

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    (function($) {
      $("#ajaxd-select-37006").change(function() {
        $.post("http://www.willgetitnow.com/wp-admin/admin-ajax.php", {
          "action": "ajax_dropdown",
          "post_id": $(this).val()
        }, function(response) {
          if (response != 0) {
            $("#ajaxd-posts-37006").html(response)
          };
        });
      }).trigger("change");
    })(jQuery);
  </script>

</head>

<body>
  <div id="services_rightarea">
    <h4 style="text-align: center;"><select class="ajaxd-select" name="ajax_post" id="ajaxd-select-37006"><option value="33251" data-permalink="http://www.blablabla.com/choose-a-state/" selected="selected">Choose a State</option><option value="8984" data-permalink="http://blablabla.com/california-restaurants/">California</option></select>
      <div
        class="ajaxd-posts" id="ajaxd-posts-37006">
        <div class="ajaxd-post" id="ajaxd-post-33251"></div>
  </div>
  </div>




  <h4 style="text-align: center;">
    <input type="button" id="R" value="Reset form" />
    <p>reset to "Choose your state"
      <p>
        <script>
   

          $(document).ready(function() {
            $("#R").click(function() {
              $('#ajaxd-select-37006').get(0).selectedIndex = 0;
            });
          });
        </script>
</body>

</html>

单独按钮重置下拉菜单

2 个答案: