Question

我有跨度并在我的视图中选择

这是代码

<li>
  <select name="search[adults]" id="search_adults" class="custom" style="display: none;">
    <option selected="selected" value="1">1 vuxen</option>
    <option value="2">2 vuxna</option>
    <option value="3">3 vuxna</option>
    <option value="4">4 vuxna</option>
    <option value="5">5 vuxna</option>
    <option value="6">6 vuxna</option>
    <option value="7">7 vuxna</option>
    <option value="8">8 vuxna</option>
    <option value="9">9 vuxna</option>
  </select>
  <span tabindex="0" id="search_adults-button" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="search_adults-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-open ui-corner-top" aria-activedescendant="ui-id-3" aria-labelledby="ui-id-3" aria-disabled="false">
        <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">1 vuxen</span>
  </span>
</li>

当我将鼠标移动到select时，我需要在mousedown事件上打开selectmenu并获取mouseup上元素的值。

对于mousedown，我编写了代码并且效果很好

$("#search_adults-button").on("mousedown", function() {
  $("#search_adults").selectmenu("open");
});
$('#search_adults-button').on("click", function() {
  $("#search_adults").selectmenu("open");
});

但我无法理解如何处理mouseup

这是选择跨度的屏幕。

例如，我单击span按住鼠标，然后将其移动到2 vuxna并释放它。而且我想得到2个vuxna。

我试着这样做

$("#search_adults-button").on("mouseup", function() {
  var conceptName = $('#search_adults').find(":selected").text();
  alert(conceptName);
});

但它不起作用。因为mouseup事件仅在鼠标跨度并且获得1个vuxna时才起作用。

以下是显示问题的代码段

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    .overflow {
      height: 200px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#speed" ).selectmenu();
    $("#speed-button").on("mousedown", function() {
  $("#speed").selectmenu("open");
});
$('#speed-button').on("click", function() {
  $("#speed").selectmenu("open");
});
$("#speed-button").on("mouseup", function() {
  var conceptName = $('#speed').find(":selected").text();
  alert(conceptName);
});
    
  } );
  </script>
</head>
<body>
 
<div class="demo">
 
<form action="#">
 
  <fieldset>
    
    <select name="speed" id="speed">
     <option selected="selected" value="1">1 vuxen</option>
    <option value="2">2 vuxna</option>
    <option value="3">3 vuxna</option>
    <option value="4">4 vuxna</option>
    <option value="5">5 vuxna</option>
    <option value="6">6 vuxna</option>
    <option value="7">7 vuxna</option>
    <option value="8">8 vuxna</option>
    <option value="9">9 vuxna</option>
    </select>
 
   
  </fieldset>
 
</form>
 
</div>
 
 
</body>
</html>

我如何处理我的问题？

Answer 1

好的，太好了。使用您提供的代码，我能够重现您的问题并找到解决方案。

问题是，在mouseup上你没有更新选择值。

这是一个有效的例子（我希望这是你想要的）

$(function() {
var select = $('#speed');
  select.selectmenu();

  $("#speed-button").on("mousedown", function() {
    select.selectmenu("open");
  });
  $('#speed-button').on("click", function() {
    select.selectmenu("open");
  });

  $(document).on("mouseup", ".ui-menu-item-wrapper", function() {
    select.val($(this).text().substr(0, 1)).change();
    select.selectmenu("close");
    select.selectmenu("refresh");
  });

});

fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

.overflow {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="demo">
  <form action="#">
    <fieldset>
      <select name="speed" id="speed">
        <option selected="selected" value="1">1 vuxen</option>
        <option value="2">2 vuxna</option>
        <option value="3">3 vuxna</option>
        <option value="4">4 vuxna</option>
        <option value="5">5 vuxna</option>
        <option value="6">6 vuxna</option>
        <option value="7">7 vuxna</option>
        <option value="8">8 vuxna</option>
        <option value="9">9 vuxna</option>
      </select>
    </fieldset>
  </form>
</div>

修改

以下是两个选择字段的示例

$(function() { var selectSpeed = $('#speed'), selectTest = $('#test'); selectSpeed.selectmenu(); selectTest.selectmenu(); $("#speed-button").on("mousedown", function() { selectSpeed.selectmenu("open"); }); $('#speed-button').on("click", function() { selectSpeed.selectmenu("open"); }); $(document).on("mouseup", "#speed-menu .ui-menu-item-wrapper", function() { selectSpeed.val($(this).text().substr(0, 1)).change(); selectSpeed.selectmenu("close"); selectSpeed.selectmenu("refresh"); }); $("#test-button").on("mousedown", function() { selectTest.selectmenu("open"); }); $('#test-button').on("click", function() { selectTest.selectmenu("open"); }); $(document).on("mouseup", "#test-menu .ui-menu-item-wrapper", function() { selectTest.val($(this).text().substr(0, 1)).change(); selectTest.selectmenu("close"); selectTest.selectmenu("refresh"); }); });

fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } .overflow { height: 200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div class="demo"> <form action="#"> <fieldset> <select name="speed" id="speed"> <option selected="selected" value="1">1 vuxen</option> <option value="2">2 vuxna</option> <option value="3">3 vuxna</option> <option value="4">4 vuxna</option> <option value="5">5 vuxna</option> <option value="6">6 vuxna</option> <option value="7">7 vuxna</option> <option value="8">8 vuxna</option> <option value="9">9 vuxna</option> </select> <select name="test" id="test"> <option selected="selected" value="1">1 test</option> <option value="2">2 test</option> <option value="3">3 test</option> <option value="4">4 test</option> <option value="5">5 test</option> <option value="6">6 test</option> <option value="7">7 test</option> <option value="8">8 test</option> <option value="9">9 test</option> </select> </fieldset> </form> </div>

更新mouseup事件的范围

1 个答案: