Унифицировать код с помощью выбора

Question

У меня есть несколько меню выбора при просмотре

Вот фрагмент кода

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

Что делает этот код?

Я нажимаю на span (откроется меню выбора) ине отпуская мышь, переместите ее, чтобы выбрать значение поля (в 1-м меню выбора, например, 2vuxna), а затем отпустите, и он обновит span.Вы можете проверить в моем фрагменте.

Что мне нужно сделать?

Для каждого следующего поля мне нужно определить новую переменную, такую ​​как var selectAnyone = $('#anyone'), чем сделать ее.selectmenu() и еще один новый $(document).on("mouseup", и снова и снова.

Как я могу унифицировать этот код для использования со всеми полями, которые будут в будущем?

Answer 1

Найдите здесь рабочий фрагмент того, чего, я думаю, вы хотите достичь.
Я попытался улучшить / сократить код, и он должен работать с таким количеством select с, как вы хотите ...
Обратите внимание, что select s должны иметь разные id s, потому что id s меню соответствуют ему.

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

Надеюсь, это поможет!