Обновление диапазона при событии mouseup - PullRequest
Новая
       8

Обновление диапазона при событии mouseup

0 голосов
/ 10 мая 2018

У меня есть span и выберите на мой взгляд

Вот его код 

<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>

Мне нужно открыть selectmenu для события mousedown и получить значение элемента на mouseup когда я перемещаю свою мышь в select.

Для mousedown я написал код, и он прекрасно работает 

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

Но я не могу понять, как обрабатывать mouseup

ЗдесьЭто экран выбора с span.

screen

Например, я нажимаю span, удерживая мышь, а затем перемещаю его в 2 vuxna и отпускаю его.И я хотел бы получить 2 vuxna.

Я пытался сделать это так 

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

Но это не работает.Потому что mouseup событие работает только тогда, когда мышь в span и получает 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>

Как мне справиться с проблемой?

1 Ответ

0 голосов
/ 10 мая 2018

Хорошо, отлично.С кодом, который вы дали, я смог воспроизвести вашу проблему и найти решение.

Проблема была в том, что на 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>
...