TutorialMeta
Ad

Unify Code Using On Selectmenu

- 1 answer

I have multiple select menus at View

Here is snippet to it

$(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" target="_blank" rel="nofollow noreferrer" 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>

What does this code do?

I click at span (it will open selectmenu) and not releasing mouse and move it to select field value (at 1st selectmenu for example 2vuxna) and than release and it will update span. You can test in my snippet.

What do I need to do?

For every next field I need to define new variable like var selectAnyone = $('#anyone'), than make it .selectmenu() and than one new $(document).on("mouseup", and again and again.

How I can unify this code to use for all fields that will be in future?

Ad

Answer

Find here a working snippet of what I think you want to achieve.
I tried to enhance/shorten the code, and it should work with as many selects as you want…
Note that the selects need to have different ids, because the menu's ids correspond to it.

$(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" target="_blank" rel="nofollow noreferrer" 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>

I hope it helps!

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad