javascript - 在选择菜单上使用统一代码

Question

我在 View 中有多个选择菜单

这是它的片段

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

这段代码有什么作用？

我在跨度上单击(它将打开选择菜单)并且不释放鼠标并将其移动到选择字段值(在第一个选择菜单中，例如 2vuxna)然后释放它，它将更新跨度。您可以在我的代码段中进行测试。

我需要做什么？

对于下一个字段，我需要定义新变量，例如 var selectAnyone = $('#anyone')，然后将其设为 .selectmenu()，然后再定义一个新变量$(document).on("mouseup", 一次又一次。

我如何统一此代码以用于将来的所有字段？

Answer 1

在这里找到我认为你想要实现的工作片段。
我试图增强/缩短代码，它应该可以根据需要使用任意数量的 select...
请注意，select 需要具有不同的 id，因为菜单的 id 与其对应。

$(function() {

  // For all selects in the form, do:
  $('.demo form select').each(function(index, value) {

    var select_elm = $(this);
    var select_id = $(this).attr('id');
    $(select_elm).selectmenu();
    
    // Menu opening
    $("#" + select_id + "-button").on("mousedown click", function() {
      select_elm.selectmenu("open");
    });  

    // Option selection
    $(document).on("mouseup", ".ui-selectmenu-open .ui-menu-item-wrapper", function() {
      // Added if to manage multiples menus
      if (
        (select_id + '-menu') ==                 // Name of the menu for this select_elm
        ($(this).closest('.ui-menu').attr('id')) // Name of the menu just clicked
      ) {
        $(select_elm).val($(this).text().substr(0, 1)).change();
        $(select_elm).selectmenu("close");
        $(select_elm).selectmenu("refresh");

        // Below added only for testing, to be sure only one value has been changed!
        var test = '';
        $('.demo form select').each(function(index, value) {
          test += $(this).attr('id') + ': ' + $(this).val() + ',   ';
        });
        console.clear();
        console.log(test);

      }
    });

  });
});

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="speed1">
        <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="test1">
        <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>
    <fieldset>
      <select name="speed" id="speed2">
        <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="test2">
        <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>

希望对您有所帮助!