Question

我想要一个链接来选择select语句的特定选项，而不必先选择它。为了清楚起见，我没有尝试使用一个按钮/链接触发器，无论之前选择了哪个选项，我希望多个链接触发一个选择选项，作为使用下拉菜单本身的替代选项。

如果我们采用以下代码，例如，我将如何触发＆＃34;远离＆＃34;通过此链接选项？

＆＃13;

<div class="collection-sort">
      <label></label>
      <select>
            <option>Select</option>
            <option value="home">Home</option>
            <option value="away">Away</option>
        </select>
    </div>

<a href="#away">
    <img src="http://via.placeholder.com/100x100">
    </a>

＆＃13;

Answer 1

您应该听取#away元素的单击并相应地更改选择字段的值。像这样：

$(document).on("click", "#away", function(){
  $("select").val("away").change();
});

这是一个工作示例

    <html>  
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <style>
          .wrap > .icon:last-of-type{
            color: red;
          }
        </style>
        <script type="text/javascript">
          $(document).ready(function(){
            $(document).on("click", "#away", function(){
              $("select").val("away").change();
            });
          });
        </script>
      </head>
      <body>
        <div class="collection-sort">
          <label></label>
          <select>
            <option>Select</option>
            <option value="home">Home</option>
            <option value="away">Away</option>
          </select>
        </div>

        <a href="#away" id="away">
          <img src="http://via.placeholder.com/100x100">
        </a>
        
      </body>
    </html>

Answer 2

您可以在具有正确选项值的多个链接上使用此handleSelect方法。

function handleSelect(option) {
  var optionElm = document.getElementById(option);
  if(optionElm) {
   optionElm.selected = !optionElm.selected;
  }
}

<div class="collection-sort">
      <label></label>
      <select>
            <option>Select</option>
            <option id="home" value="home">Home</option>
            <option id="away" value="away">Away</option>
        </select>
    </div>

<a href="#away" onclick=handleSelect("away")>
    <img src="http://via.placeholder.com/100x100">
</a>

触发下拉选择选项的图片链接，无需事先选择

2 个答案: